如何将div制作为输入文本表单？

Question

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

我尝试像 Facebook 更新输入表单一样输入文本。输入在换行后自动调整大小。使用的元素或标签是

。我说“使用”是因为，在他们重新设计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 中的“烦人的小三角形”：

textarea {
  resize: none;
}

两种想法的 JS Fiddle 演示。

Answer 2

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

Answer 3

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

textarea { resize:none; }

这将使三角形消失。

Answer 4

您应该能够将样式添加到文本区域，就像使用 p、h1、h2 等标签一样。

因此您可以定位所有文本区域或具有特定类或 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;
}

此示例将定位页。
如果您想定位类或 ID，请将 textarea 更改为 .nameOfClass 或 #nameOfId。

希望这有帮助。