5

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

  1. 在跨度之前或之后直接单击并键入文本时，文本将具有与跨度相同的标记。在只有跨度的行上添加单词非常困难。我正在考虑通过填充跨度来解决这个问题， 但它看起来有点奇怪。
  2. 用户可以单击跨度并更改它，我宁愿让用户单击跨度并在更改之前选择替换或忽略选项。换句话说，它需要被锁定。我正在考虑通过 capturig keyup 来做到这一点，如果它来自一个跨度，那么 e.preventDefault() 就可以了，但是编程它有点痛苦。

所以我的问题是：

是否有一种简单的方法可以将 span 元素锁定在不涉及捕获 key up 和 preventDefault 的 contenteditable 中（尚未尝试过，甚至不确定它是否会起作用）？

当直接单击或移动光标到跨度旁边并输入文本时，它将成为跨度的一部分，有没有办法让它不成为跨度的一部分？用 span 填充 可能会起作用，但是当 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>
4

2 回答 2

2

标记可编辑容器 contenteditable="false" 内的跨度。它将同时解决这两个问题。

于 2013-09-14T02:45:01.597 回答
0

至于 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();
       }
});

我将研究用 填充锁定的跨度。如果元素之前或之后不存在空格，则在我得到解决方案后将其发布在这里。

最终在没有检查的情况下填充了跨度，因为无论如何稍后都会删除额外的空格。看起来有点好笑，但最好是不能添加文本。

于 2013-05-14T02:17:58.243 回答