我有一个用于用户输入的 contenteditable div，当单击按钮时，它会显示替换某些单词的选项。首先，它删除所有 html 并创建可以替换单词的 span 元素。这些词的标记不同，我面临一些问题。
- 当直接在跨度之前或之后单击并键入文本时，文本将具有与跨度相同的标记。在只有跨度的行上添加单词是非常困难的。我正在考虑通过填充跨度来解决这个问题
但看起来有点奇怪。
- 用户可以单击跨度并更改它，我宁愿让用户单击跨度并在更改之前选择替换或忽略选项。换句话说，它需要被锁定。我正在考虑通过 capturig keyup 来完成此操作，如果它来自跨度，则对其进行 e.preventDefault() 但对其进行编程有点痛苦。
所以我的问题是：
有没有一种简单的方法可以在 contenteditable 中锁定 span 元素，而不涉及捕获 key up 和 PreventDefault （尚未尝试，甚至不确定它是否会起作用）？
当直接单击或移动光标到跨度旁边并键入文本时，它将成为跨度的一部分，有没有办法让它不成为跨度的一部分？填充跨度 可能有用，但当跨度是该行的第一个单词时，它看起来很奇怪。为了说明这一点，我在下面发布了一个示例 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<div contenteditable="true"></div>
<script type="text/javascript">
document.getElementsByTagName("div")[0]
.innerHTML="<span style='color:green'>hello</span>"
</script>
</body>
</html>
标记可编辑容器 contenteditable="false" 内的范围。它将同时解决这两个问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
