Javascript Webkit，即取消选择文本

我正在制作一个contentEditable jQuery插件。我已经创建了一个“工具”栏来执行对文本的操作，例如使用execCommand将其加粗、斜体等。问题是，当您选择文本并单击其中一个按钮（带有onclick事件的div）时，它会取消选择您选择的文本（所有浏览器）。为了解决这个问题，我使用了：

toolBar.onmousedown=function(){return false};

在Firefox和Opera中运行良好。我想用

toolBar.onselectstart = function(){return false};

---

这会阻止IE中的文本选择。但是，webkit和IE都不起作用。我以前见过使用输入按钮实现这一点，但我更喜欢使用div。有什么想法吗？

我通过重新选择文本解决了这个问题

在mouseup上，我捕获选择信息：

$.getSelection = function() {
    // ie has its own way of doing things from here on.
    if($.browser.msie) return document.selection.createRange();

    if (window.getSelection) {
        var selection = window.getSelection();
    }
    else if (document.selection) { // should come last; Opera!
        var selection = document.selection.createRange();
    }

    if (selection.getRangeAt)
        var range = selection.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
    }
    if (!range.toString().match(/[^\t\r\n ]/)) return false;

    var ret = {};

    // start end length text

    ret.startContainer  = range.startContainer;
    ret.start   = range.startOffset;
    ret.endContainer    = range.endContainer;
    ret.end     = range.endOffset;
    ret.length = ret.end - ret.start;
    ret.collapsed   = range.collapsed;

    return ret;
};

这是储存在你选择的地方

然后，如果浏览器符合w3c的DOM范围（即除ie外的所有浏览器），我可以重新选择文本，并执行execCommand：

function handleReselection() {
    if($.browser.msie) {
        return this.selection;
    }
    else {
        setSelection(this.selection);
        return document
    }
}

function setSelection(selection) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(selection.startContainer, selection.start);
    range.setEnd(selection.endContainer, selection.end);
    sel.addRange(range);
}

handleReselection().execCommand('bold', false, null);

---

我通过重新选择课文解决了这个问题

在mouseup上，我捕获选择信息：

$.getSelection = function() {
    // ie has its own way of doing things from here on.
    if($.browser.msie) return document.selection.createRange();

    if (window.getSelection) {
        var selection = window.getSelection();
    }
    else if (document.selection) { // should come last; Opera!
        var selection = document.selection.createRange();
    }

    if (selection.getRangeAt)
        var range = selection.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
    }
    if (!range.toString().match(/[^\t\r\n ]/)) return false;

    var ret = {};

    // start end length text

    ret.startContainer  = range.startContainer;
    ret.start   = range.startOffset;
    ret.endContainer    = range.endContainer;
    ret.end     = range.endOffset;
    ret.length = ret.end - ret.start;
    ret.collapsed   = range.collapsed;

    return ret;
};

这是储存在你选择的地方

然后，如果浏览器符合w3c的DOM范围（即除ie外的所有浏览器），我可以重新选择文本，并执行execCommand：

function handleReselection() {
    if($.browser.msie) {
        return this.selection;
    }
    else {
        setSelection(this.selection);
        return document
    }
}

function setSelection(selection) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(selection.startContainer, selection.start);
    range.setEnd(selection.endContainer, selection.end);
    sel.addRange(range);
}

handleReselection().execCommand('bold', false, null);

---

一个简单的替代方法是为工具栏使用标记。这样一来，它一开始就不会丢失文本选择。

一个简单的替代方法是在工具栏上使用标记。这样一来，它一开始就不会丢失文本选择