Question

我正在尝试创建一个 textarea，用于侦听键入，粘贴或删除的URL并将其转换为链接。这些链接不可编辑，必须视为块。删除和退格必须删除它们。最后，如果它们在插入符号时显示完整选择，那就太好了。

问题：在花费太多时间并尝试在stackoverflow（Tim Down）上找到的一些建议的解决方案之后，我仍然无法使其正常工作。我发现很难将插入符号始终放在正确的位置，并且在粘贴链接并完成自动转换后，选择被锁定并且无法完成输入。我尝试在每个链接之前和之后插入并保持零宽度字符，但随后开始出现其他选择问题。

有人可以看看下面的小提琴，它代表了一个简化的版本，重点关注问题并指出正确的方向通过这些不可编辑的div中的不可编辑的链接进行正确的键盘导航 ？

jsFiddle here

$("#customtextarea").on("input propertychange drop paste", function (e) {
    var $this = $(this), savedSelection = saveSelection($this.get(0));
    var parsedHtml = getParsedHtml($this.html()); // This gets the innerhtml with the urls turned to links
    $this.html(parsedHtml).focus();
    restoreSelection($this.get(0), savedSelection);
});

编辑：我采用了XuoriG建议的方法，我仍然面临与以前相同的问题：插入链接之后插入的“插入”并且链接无法连接被删除。键盘导航（左，右）也不起作用。

New jsFiddle here

Answer 1

使用$this.html时，您将替换整个DOM并丢失您的选择。

我能够做到这一点的方法是在每个按键上动态创建和删除DOM节点。我现在无法为您发布代码，但基本上您在密钥上遍历每个节点并创建一个新的锚标记，其内容与您的url正则表达式匹配，并从文本节点中删除它。重复，直到节点中没有更多匹配项。您将能够以这种方式保存和恢复选择。

之后的困难部分是能够附加到现有网址。我这样做的方法是检测文本节点是否在锚标记旁边，如果anchor text + the text node也匹配了一个url，你将文本节点附加到锚标记并删除文本节点。

内心的插入行为是真实的，并且在可疑的虚假元素旁边

1 个答案: