Question

JS

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    console.log(html);  <-- returning text even not selected.
}

$(document).ready(function(){
        $(document).bind("mouseup", getSelectionHtml);
});

我目前正在尝试了解以下行为：

1）选择几行文本（console.log显示这些行） - 预期。

2）在您所做的选择中单击。然后，Console.log显示与之前选择的文本相同的文本。 - 没想到;在这里，我希望getSelection不会返回任何内容，因为当前没有选择任何内容。

谁能告诉我我在这里缺少什么？

谢谢！

Answer 1

DEMO jsFiddle

<强> JS

var previousText = '';
function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    if(html!= previousText) {
        console.log(html);
    }
    previousText = html;
}

$(document).mousedown(function () {}).mouseup( function () {
    getSelectionHtml();
});

要显示空选择，只需更改：

if(html!= previousText) {

到此：

if(html!= previousText && html != '') {

注意：我正在使用jQuery，因为你太

了

清除后，getSelection返回文本

1 个答案:

DEMO jsFiddle