如何避免在禁用文本区域后仍突出显示选定文本？ （铬合金）

Question

Chrome 83 中的奇怪问题（在 FF 78 中运行良好）：

1. 我在文本区域中选择文本 --> 它被突出显示
2. 我点击了其他地方 --> 文本区域失去焦点，所选文本仍然突出显示
3. 文本区域被禁用（通过 javascript）--> 选定的文本仍然突出显示 - 奇怪！

将选择范围设置为零没有帮助。将 user-select 设置为 none 也无济于事。通过javascript清除窗口/文档的选择也没有任何效果。突出显示的文本仍然存在。唯一有用的是：选择该网页上的其他文本。

这是一个错误吗？我可以通过使用 css/javascript 来主动删除文本选择/文本突出显示吗？

感谢任何帮助。

Answer 1

您应该可以使用selection.removeAllRanges() 或selection.empty()，具体取决于浏览器的年龄。我在这里使用mouseout 事件，因为至少对我来说，在文本区域之外单击会清除选择。

document.getElementById('test').addEventListener('mouseout', function() {
    document.getElementById('test').disabled = true;
    var sel = window.getSelection ? window.getSelection() : document.selection;
    if (sel) {
        if (sel.removeAllRanges) {
            sel.removeAllRanges();
        } else if (sel.empty) {
            sel.empty();
        }
     }
});

<textarea id="test"></textarea>