javascript - 创建一个假的文本区域

Question

对于我正在进行的元素，我需要能够在文本区域的文本内容之前显示“divs”:

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

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

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

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

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

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

Answer 1

我要做的是:

1. 您的包含元素(文本编辑器)应该是 block 级元素。它不可编辑。
2. 您的标签应包含以下内容: float 到左侧的容器和内联 block 或 float 子项。
3. 非 float block (重要)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，但它应该可以正常工作。