Question

我正在构建一个标签到超链接的转换器。这完全正常。最终结果将如下所示：

与别人在一起时，我对你的爱是 #big 。

但是，如果用户在超链接后面按退格并更正主题标签的文本，则他将开始在超链接内部键入内容，从而使以下整个文本成为超链接，因此为蓝色：

我对你的爱是 #bigger when I'm with someone else

如果我使用 contenteditable =“ false” ，当我访问超链接时，我的Firefox浏览器甚至会阻止我按退格键。然后，超链接根本不会删除：

<div contenteditable="true">
    My love for you is 
        <a contenteditable="false" href="https://google.com" >#big</a> 
    when I'm with someone else.
</div>

当用户在JQuery中按下 backspace 或 delete 时，是否可以删除整个超链接？因此最终结果必须如下所示：

<div contenteditable="true">
    My love for you is  when I'm with someone else.
</div>

Answer 1

处理此问题的一种方法是使用事件侦听器。我最初的想法是使用类似keypress或keydown的事件，但是正如this stackoverflow answer所说，那些事件将始终附加在contenteditable元素上，而不是任何子元素上。因此，很难判断该编辑是否发生在锚标记内。

但是正如该链接的答案也提到的那样，DOMCharacterDataModified事件将附加到子元素。这是我终于得出的解决方案。

let div = document.querySelector('.edit');
div.addEventListener('DOMCharacterDataModified', function(e) {
  if (e.newValue.length >= e.prevValue.length) return;
  var target = e.target
  if (target instanceof Text) target = target.parentElement;
  var atag = target.closest('.edit > a');
  if (atag) div.removeChild(atag);
});

<div class='edit' contenteditable="true">
  My love for you is <a href="https://google.com">#big</a> when I'm with someone else.
</div>

一些注意事项：

必须检查#text节点，因为它不像closest那样具有Element方法。
然后，我可以使用closest方法来查看它是否是锚标记，它是contenteditable元素的直接后代（我在该元素中添加了一个类名，使其更简单一些）。
没有很好的方法来知道可能已经按下了什么键。最简单的方法似乎是比较newValue和prevValue的长度，看是否比现在短。如果是这样，则假定发生了退格键/删除操作。
但是，还有其他方法可以使值变短，特别是如果有人突出显示多个字符，然后通过键入一个字符来替换它。如果这是一个问题，那么解决方案将需要更加复杂才能考虑在内。

在Chrome和Firefox中都经过测试。

按下退格键或删除按钮时如何删除整个超链接？

1 个答案: