我有一个
DIV
,其中有 contentEditable=true
,以便用户可以对其进行编辑。 问题是它看起来不像文本字段,因此用户可能不清楚它可以编辑。
有没有一种方法可以设置
DIV
的样式,使其在用户看来就像文本输入字段?
这些看起来与 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>
输出:
如果您使用 bootstrap,只需添加
form-control
类。例如:
class="form-control"
在WebKit中,你可以这样做:
-webkit-appearance: textarea;
你可以选择内框阴影:
div[contenteditable=true] {
box-shadow: inset 0px 1px 4px #666;
}
我从 Jarish 更新了 jsfiddle:http://jsfiddle.net/ZevvE/2/
我建议这样做是为了匹配 Chrome 的风格,扩展自 Jarish 的示例。请注意之前的答案已省略的光标属性。
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;
所有这些的问题是,如果文本行又长又宽,以至于 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>
您可以在 DIV 下放置一个类似大小的 TEXTAREA,这样标准控件的框架将在 div 周围可见。
最好将其设置为禁用,以防止意外的焦点窃取。
快速提示,尝试使用:
white-space: pre-wrap;
这使得新行在 div 中的渲染效果与在文本区域中的渲染效果相同。