创建一个虚假的文本区域答案

【问题标题】：Creating a fake textarea创建一个虚假的文本区域
【发布时间】：2012-02-21 18:43:39
【问题描述】：

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

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

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

目前可行，但并不完美，尤其是在 :focus 方面（单击外部 div 上的任意位置应在文本跨度中显示光标*），如果我清空文本跨度，它似乎会中断。

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

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

$('#outerDiv').bind('click', $('#outerDiv span.text').focus()); 似乎在 Chrome 中有效，但在 Firefox 中无效。

【问题讨论】：

您始终可以通过容器上的点击事件将焦点放在跨度上
textarea 中的文本是否有与 div 在同一行开始？如果你能从下一行开始，那就容易多了。
希望对您有所帮助net.tutsplus.com/tutorials/javascript-ajax/…
@GregL : 如果我做不到，我会让它在 div 下开始，但如果它们在同一行会更漂亮。
请注意，模拟跨跨度的文本选择（以提供与 textarea 相同的体验）在 a** 中会很痛苦。我不太确定这个解决方案比使用一个 textarea 并确保文本被移动以便它在 div1 或 div2 之后开始那么复杂。

标签： javascript jquery html css

【解决方案1】：

我要做的是：

您的包含元素（文本编辑器）应该是块级元素。不可编辑。
您的标签应包含以下内容：floats 位于左侧和 inline-block 或 floated 子项的容器。
一个非浮动块（重要）级别元素，即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，但它应该可以正常工作。

【讨论】：