Question

我希望在用户输入内容时添加一些HTML。例如，

$('body')
  .delegate('div[contenteditable=true]', 'blur keyup paste',
    function(){
      var html = this.innerHTML;
      html.replace( "a", "b" );
      this.innerHTML = html;
    });

对于一个人来说，这似乎不会取代任何东西。第二，我得到一个奇怪的问题，我再也无法输入到可信的div中。我检查了在div上发射的事件，没有“模糊”事件发生。我似乎突出了div，但我必须再次点击div来输入任何内容。我在这里缺少什么？

Answer 1

对于第一部分，问题是JavaScript中的replace()字符串方法返回一个新字符串，不会影响原始字符串。你需要的是：

html = html.replace("a", "b");

对于第二个问题，问题很可能是设置元素的innerHTML属性会破坏并重新创建元素中的整个DOM树，并且因为选择或插入符号包含在该DOM树中不再存在，浏览器必须做一些事情来恢复。我的猜测是你正在测试的浏览器只是清除选择。

Answer 2

如果您希望允许用户选择并使其粗体/斜体（或插入用户插入点标记所在的HTML块），则需要使用document.execCommand。 Mozilla网站有documentation on this。

Answer 3

与类似问题作斗争：我需要突出强调一些特殊角色。例如，突出显示＆amp; NBSP;红色背景。所以我正在做类似

的事情

elem.innerHTML = elem.innerHTML.replace('&nbsp;', '<span class="highlight">&nbsp;</span>');

当然浏览器会重新创建elem（重绘它），elem会松散焦点和插入位置。如果您在FireFox中的keyup / input事件上打印elem.innerHTML，您会看到它粘贴特殊＆lt; br＆gt;作为一个标记。我正在尝试使用相同的技术：我使用Range对象粘贴在插入位置的标记，然后我正在替换＆amp; NBSP; （此时我松了焦点）然后我得到了标记来选择并删除。

请参阅范围API文档https://developer.mozilla.org/en-US/docs/Web/API/range

即时取代令人满意的文本

3 个答案: