如何使可编辑的 DIV 看起来像文本字段？答案

【问题标题】：How do I make an editable DIV look like a text field?如何使可编辑的 DIV 看起来像文本字段？
【发布时间】：2017-02-27 17:37:26
【问题描述】：

我有一个DIV，其中有contentEditable=true，因此用户可以对其进行编辑。问题是它看起来不像一个文本字段，因此用户可能不清楚它是否可以编辑。

有没有一种方法可以设置DIV 的样式，使其在用户看来就像一个文本输入字段？

【问题讨论】：

背景：白色；边框：1px 实心 #666;光标：文本； ? :P 见my demo
我想让它看起来像textarea？ jsfiddle.net/vwPgT
@mkk - 如果您添加一些示例文本，可能会有所帮助：jsfiddle.net/ZevvE/1
@Jared :) 干得好！ ;-) 现在很难将它与 div 混淆。哦，它是一个 div，我忘了 :)
@mkk - 我个人认为我的演示更清晰，但是嘿，就是这样。

标签： html css

【解决方案1】：

它们看起来与 Safari、Chrome 和 Firefox 中的真实对应物相同。它们优雅地降级并且在 Opera 和 IE9 中看起来也不错。

演示：http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS：

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

HTML：

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

输出：

【讨论】：

-webkit-small-control 和 medium -moz-fixed 到底是做什么的？它们似乎使字体在 Firefox v13.0 中看起来是等宽的
@Hengjie 这些是浏览器在显示输入字段时使用的默认样式。
这是一个用例，尝试在其中复制粘贴 html 内容。你会看到区别。
还应该加上 - 背景：白色；
如果我想在这个 div 中有另一个 div，我不希望它是可编辑的？

【解决方案2】：

如果您使用引导程序，只需添加 form-control 类。例如：

class="form-control"

【讨论】：

这是一个很好的答案，我觉得是最干净的。我投票认为这是正确的答案。
有什么办法让用户扩大区域？普通的 textarea 会这样做。

【解决方案3】：

在 WebKit 中，你可以这样做：-webkit-appearance: textarea;

【讨论】：

嗯，太方便了。

【解决方案4】：

你可以选择内盒阴影：

div[contenteditable=true] {
  box-shadow: inset 0px 1px 4px #666;
}

我从 Jarish 更新了 jsfiddle：http://jsfiddle.net/ZevvE/2/

【讨论】：

【解决方案5】：

我会建议这个来匹配 Chrome 的风格，从 Jarish 的例子中扩展而来。注意之前的答案已经省略的 cursor 属性。

cursor: text;
border: 1px solid #ccc;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 200px;
overflow: auto;
padding: 2px;
resize: both;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;

【讨论】：

【解决方案6】：

所有这些的问题是，如果文本行长且宽得多以至于 div overflow:auto 没有添加正常工作的滚动条，它们都无法解决。这是我找到的完美解决方案：

创建两个 div。一个足够宽的内部 div 以处理最宽的文本行，然后是一个较小的外部 div，它作用于内部 div 的支架：

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">
    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>
     look and act more like a real text area bla bla bla <br/>

    </div>
</div>

【讨论】：

【解决方案7】：

您可以在您的 DIV 下放置一个类似大小的 TEXTAREA，这样标准控件的框架将在 div 周围可见。

最好将其设置为禁用，以防止意外窃取焦点。

【讨论】：

是的，不确定这是 OP 在答案中寻找的内容。
如果你想让文本域自动缩放到 div 的内容，这就很难了。