我有以下标记-非可编辑的跨度与用户选择:在contenteditable div中没有:
<div contenteditable="true">
some random text
<span contenteditable="false" style="user-select: none">1</span><span contenteditable="false" style="user-select: none">2</span>
</div>
这里的关键点是两个跨度都在一条线上。当我把光标放在行尾并按退格键时,所有内容都被删除了。当将span放在不同的行时,代码按预期工作-Backspace
只删除最后一个不可编辑的元素。
Chrome出现问题FF的行为也很奇怪,但以另一种方式。我现在只需要让它在Chrome中工作。
下面是一个沙箱,其中包含一个最小的可重复示例:https://codesandbox.io/s/dreamy-euler-9vsyll?file=/index.html
在标记中物理地将span放在不同的行上解决了这个问题,但是没有用,因为在我的例子中我动态地将不可编辑的元素添加到contenteditable中
1条答案
按热度按时间r8uurelv1#
收听您的文本区域的按键事件。如果按了退格键(或删除),则获取所有标签并临时删除 user-select:none.然后添加setTimeout(func,0)来恢复 user-select:在最后一个标签被删除后,返回none。