Html 如何使可编辑的 DIV 看起来像文本字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8956567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an editable DIV look like a text field?
提问by sanity
I've got a DIVwhich has contentEditable=trueso the user can edit it. The problem is that it doesn't look like a text field, so it may not be clear to the user that it can be edited.
我有一个DIV，contentEditable=true以便用户可以编辑它。问题是它看起来不像文本字段，因此用户可能不清楚它可以编辑。
Is there a way that I can style the DIVso that it appears to the user like a text input field?
有没有一种方法可以设置样式DIV，使其像文本输入字段一样呈现给用户？
回答by ThinkingStiff
These look the same as their real counterparts in Safari, Chrome, and Firefox. They degrade gracefully and look OK in Opera and IE9, too.
这些看起来与它们在 Safari、Chrome 和 Firefox 中的真实对应物相同。它们优雅地降级并且在 Opera 和 IE9 中看起来也不错。
Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/
演示：http: //jsfiddle.net/ThinkingStiff/AbKTQ/
CSS:
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:
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>
Output:
输出：
回答by paraplu
If you use bootstrap just add form-controlclass. For example:
如果您使用引导程序，只需添加form-control类。例如：
class="form-control"
回答by Abhi Beckert
In WebKit, you can do: -webkit-appearance: textarea;
在 WebKit 中，您可以执行以下操作： -webkit-appearance: textarea;
回答by timing
You could go for an inner box shadow:
你可以选择一个内盒阴影：
div[contenteditable=true] {
box-shadow: inset 0px 1px 4px #666;
}
I updated the jsfiddle from Jarish: http://jsfiddle.net/ZevvE/2/
我从 Jarish 更新了 jsfiddle：http: //jsfiddle.net/ZevvE/2/
回答by Robert Waddell
I would suggest this for matching Chrome's style, extended from Jarish's example. Notice the cursor property which previous answers have omitted.
我建议将其用于匹配 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;
回答by evan toder
The problem with all these is they don't address if the lines of text are long and much wider that the div overflow:auto does not ad a scroll bar that works right. Here is the perfect solution I found:
所有这些的问题是，如果文本行很长并且比 div 溢出更宽，它们就无法解决：auto 没有正确工作的滚动条。这是我找到的完美解决方案：
Create two divs. An inner div that is wide enough to handle the widest line of text and then a smaller outer one which acts at the holder for the inner div:
创建两个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>
回答by wizzard0
You can place a TEXTAREA of similar size under your DIV, so the standard control's frame would be visible around div.
您可以在 DIV 下放置一个类似大小的 TEXTAREA，这样标准控件的框架将在 div 周围可见。
It's probably good to set it to be disabled, to prevent accidental focus stealing.
将其设置为禁用可能很好，以防止意外窃取焦点。
