创建一个假的textarea

Question

对于我正在进行的项目，我需要能够在textarea的文本内容之前显示“div”：

起初我以为我可以放置具有绝对定位和z-index的div，但这需要“推”文本，并确保用户无法删除那些第一个空格，而不是使用退格或ctrl + c也不是ctrl + x也不删除......看起来很复杂，以便采取一切可能的方式。

现在，我正在尝试使用“div”看起来像textarea，其中包含可编辑“span”，其中包含文字：

目前有效，但它并不完美，特别是在：焦点（单击外部div上的任何位置应该在文本范围内显示光标*），如果我清空文本范围，它似乎会中断。

有关如何解决此问题的任何想法？我愿意接受建议，即使我必须改变假文本区的结构。

它应该适用于所有主要（最近的）浏览器，并且可以使用jQuery。

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus());似乎适用于Chrome，但不适用于Firefox。

Answer 1

我要做的是以下内容：

1. 您的包含元素（文本编辑器）应该是块级元素。这是不可编辑的。
2. 您的代码应包含以下内容：左侧float和inline-block或float ed儿童的容器。
3. {strong>非浮动块（重要）级别元素contenteditable。

最终结果：

<div>
  <!-- The list of tags -->
  <ul style="float:left"> 
    <li style="float:left">...</li>
    <li style="float:left">...</li>
    <li style="float:left">...</li>
  </ul>
  <!-- This will contain your text: -->
  <div contenteditable="true">...</div>
</div>

如果您有很多标签，它们将换行到下一行。可编辑元素中的文本也将包围标记。

单击标签不会给予可编辑元素焦点，但您可以使用JavaScript来解决这个问题。

Here's an example I whipped up。适用于Safari / Chrome / Firefox。没有测试过Internet Explorer，但它应该可以正常工作。