创建一个假的textarea

Question

对于我正在进行的项目,我需要能够在textarea的文本内容之前显示"div":

起初我以为我可以放置具有绝对定位和z-index的div,但这需要"推"文本,并确保用户不能删除那些第一个空格,而不是退格或ctrl + c也不ctrl + x也没有删除......看起来很复杂,一切皆有可能.

现在,我正在尝试使用一个看起来像textarea的"div",其中包含一个包含文本的可编辑 "span":

这当然有效,但它并不完美,特别是在以下方面:焦点(单击外部div上的任何位置应该在文本范围内显示光标*),如果我清空文本范围,它似乎会中断.

有想法该怎么解决这个吗 ？我愿意接受建议,即使我必须改变假文本区域的结构.

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

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus()); 似乎在Chrome中工作但在Firefox中不起作用.

Answer 1

我要做的是以下内容:

1. 包含元素(文本编辑器)应该是块级元素.它不可编辑.
2. 您的代码应包含以下内容:float左侧和/ inline-block或floated子级的容器.
3. 阿非浮动块(重要)水平元件,其可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来解决这个问题.

这是我掀起的一个例子.适用于Safari/Chrome/Firefox.没有测试过Internet Explorer,但它应该可以正常工作.