Question

我有一个用于用户输入的contenteditable div，当点击一个按钮时，它会显示替换某些单词的选项。首先，它剥离所有html并创建可以替换单词的span元素。这些单词的标记不同，我遇到了一些问题。

在跨度之前或之后直接单击并键入文本时，文本将具有与跨度相同的标记。在仅具有跨度的线上添加单词非常困难。我想通过用 填充跨度来解决这个问题，但它看起来很奇怪。
用户可以单击跨度并进行更改，我希望用户单击跨度并在更改之前选择替换或忽略选项。换句话说，它需要被锁定。我想通过capturig keyup来做这件事，如果它来自一个跨度然后是e.preventDefault（），但编程它有点痛苦。

所以我的问题是：

是否有一种简单的方法可以将一个span元素锁定在一个无法获取密钥并防止默认的范围内（还没有尝试过，甚至不确定它是否有效）？

当单击或直接移动光标旁边的光标并键入文本时，它将成为跨度的一部分，有没有办法让它不是跨度的一部分？用 填充跨度可能有效，但当跨度是该行的第一个单词时，它看起来很奇怪。为了说明这一点，我在下面发布了一个示例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>

Answer 1

在可编辑容器内标记范围contenteditable =“false”。它会同时解决这两个问题。

Answer 2

至于contenteditable div中的锁定元素;我正在使用需要锁定的跨度，并且它们不会触发keydown事件，因此在div上设置事件并检查范围是否为锁定元素。

我正在使用谷歌闭包库，所以获得范围很简单：

goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div
   [goog.events.EventType.KEYDOWN,
    goog.events.EventType.PASTE],
   function(e){
       if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow
           return;
       }
       var el=goog.dom.Range.createFromWindow()
         .getContainerElement();
       if(el.className.indexOf("locked")!==-1){
           e.preventDefault();
       }
});

如果在元素之前或之后不存在空格，我将查看使用＆amp; nbsp; 填充锁定范围，并在获得解决方案后将其发布到此处。

结束填充跨度而不进行检查，因为无论如何都将删除额外的空格。看起来很有趣，但最好不能添加文字。

在contenteditable =“true”div中锁定元素

2 个答案: