javascript - 删除选定/突出显示的文本

Question

我在 div selectable 中有一些文本，我希望允许用户通过使用光标选择文本来删除文本。

它工作正常，但如果您单击文本，所有内容都会被删除。如果您单击并拖动进行选择，效果很好。

我该怎么做才能使它正确地处理我的文本。如果用户单击文本，则不应删除所有内容。

jsFiddle用于测试。

jQuery:

    if (window.getSelection().toString() != "") {
        selectedText = window.getSelection().toString()
        var text1 = $(".selectable").text().split("")
        pointStart = window.getSelection().anchorOffset
        pointEnd = window.getSelection().focusOffset

        if (pointEnd < pointStart) {
            pointStart = pointEnd
        }
        text1.splice(pointStart, selectedText.length);
        text1 = text1.join("")
    } else {
        selectedText = $(".selectable").text()
        var text1 = ""
    }
$(".selectable").text(text1)

示例 HTML:

<div class="selectable">
   Hello world what is 進撃の巨人 reality test test... test.
</div>

编辑:潜在的解决方案:

if (window.getSelection().toString() == "") {
    return false;
    }

Answer 1

您的错误在于else部分。如果用户未选择任何文本(只需单击文本即可)，您的 else 代码块将被执行。

在该 block 中，您分配 var text1 = "";

稍后您将 text1 指定为 $(".selectable") 元素的文本内容。

只需将该行更改为:

var text1 = selectedText;

查看更新后的fiddle

我还建议您仅在 mouseup 处理程序的顶部声明 var text1 一次，并将分配从 var text1 = "value" 更改为 text1 = “值”

参见:var hoisting