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

Question

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

3

我正在构建一个将哈希标签转换为超链接的工具。这个工具已经完全正常运行。最终结果将如下所示：

当我和别人在一起时，我对你的爱是#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 中是否有一种方法可以在用户按下退格或删除键时删除整个超链接？因此最终结果必须如下所示：

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

- IT-Girl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David784 · Accepted Answer

一种处理这个问题的方法是使用事件监听器。我最初考虑使用像 keypress 或 keydown 这样的事件，但是正如这个stackoverflow答案所说，这些事件总是会附加到 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节点，因为它没有像Element一样具有closest方法。
然后，我可以使用closest方法来查看它是否是锚点标记，这是contenteditable元素的直接后代(我添加了一个类名来使它更简单)。
没有好的方法可以知道按下了哪个键。最简单的方法似乎是将newValue和prevValue的长度进行比较，以查看它是否比之前短。如果是这样，就假定出现了一个退格符或删除操作。
但是，还有其他方式可以使值变短，特别是如果某人突出显示了多个字符，然后通过键入单个字符来替换它。如果这是一个问题，那么解决方案需要更复杂才能考虑到这一点。

在Chrome和Firefox中测试过。