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

82

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

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

html css

— 理智
source

2

背景：白色；边框：1px实心＃666；光标：文本；？：P看我的演示

— mkk 2012年

我想让它看起来像textarea吗？jsfiddle.net/vwPgT

— Jared

1

@mkk -会不会让小，如果你添加了一些示例文本：jsfiddle.net/ZevvE/1

— 贾里德Farrish

@Jared :)干得好！;-)现在很难将它与div混淆了。哦，它是一个div，我忘了:)

— mkk 2012年

@mkk-我个人认为我的演示更加清晰，但是，嘿，就是这样。

— 贾里德·法瑞希

125

它们看起来与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>

输出：

在此处输入图片说明

— 思维僵化
source

1

这到底是什么-webkit-小控制和媒体-moz-固定的吗？他们似乎使字体看起来在Firefox V13.0等宽

— 横街

1

@Hengjie这些是浏览器在显示输入字段时使用的默认样式。

— ThinkingStiff

1

这是一个用例，请尝试将html内容粘贴到其中。您将看到差异。

— Praveen 2014年

1

还应该添加-background：white;

— Brana

1

如果我想要该div内的另一个div，但又不想对其进行编辑该怎么办？

— FrenkyB

21

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

class="form-control"

— 帕拉普鲁
source

这是一个很好的答案，我觉得这是最干净的。我的投票是正确的答案。

— aholtry

有什么办法可以让用户扩大面积？正常的textarea执行此操作。

— MARS

14

在WebKit中，您可以执行以下操作： -webkit-appearance: textarea;

— 阿比·贝克特（Abhi Beckert）
source

10

好吧，那太方便了。

— 杰瑞德·法瑞希

3

您可以选择一个内部框阴影：

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

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

— 定时
source

1

我建议这样做是为了配合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;

— 罗伯特·瓦德尔
source

0

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

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

— wizzard0
source

是的，不确定这是OP在答案中寻找的内容。

— 贾里德·法瑞希

如果您希望文本字段随div的内容自动缩放，这将变得越来越困难。

— 时间

0

所有这些的问题是，如果文本行太长且比div溢出要宽得多，它们将无法解决：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>

— 埃文·托德
source