Question

使用textarea和input-text作为文本表单的输入存在一些缺点。 textarea在右下角有一个恼人的三角形，输入文本是单行输入。

我尝试输入类似facebook更新输入表单的文本。换行后自动调整大小。使用的元素或标签是<div>。我说“用过”是因为在重新设计Facebook后，我无法弄清楚现在使用的是哪个标签。有一个CSS属性，使用户可以编辑div元素中的文本。我实际上复制了CSS属性，但现在我丢失了它。有人能告诉我它是哪个CSS属性吗？我有一个弱内存，它以-webkit前缀开头，但是

Answer 1

如果您使用html5，则可以使用：

<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>

如果你把它与css结合起来：

#divThatYouCanWriteStuffIn {
    min-height: 4em; /* it should resize as required from this minimum height */
}

摆脱textarea s中的'讨厌的小三角'：

textarea {
  resize: none;
}

JS Fiddle demo of both ideas

Answer 2

我知道你可以通过getElementByID('mydiv').contentEditable='true';在javascript中执行此操作，但我不知道如何在CSS中完成此操作

Answer 3

Facebook更新输入字段是TEXTAREA元素。诀窍是使用resize属性：

textarea { resize:none; }

这将使三角形消失。

Answer 4

你应该可以像使用p，h1，h2等标签一样将你的风格添加到textarea中。

因此，您可以定位所有textareas或具有特定类或ID的

示例：

textarea    {
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    line-height:140%;
    color:black;
    margin:0 0 5px 5px;
    padding:5px;
    background-color:#999999;
    border:1px solid black;
}

此示例将定位页面上的所有textareas。如果要定位类或id，请将textarea更改为.nameOfClass或#nameOfId。

希望这有帮助。

如何将div设置为输入文本表单？

4 个答案: