Question

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

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

在Firefox和Opera中运行良好。我正在尝试使用

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

阻止IE中的文本选择。但是，webkit或IE都不起作用。我以前用输入按钮看过这个，但我宁愿使用div。有什么想法吗？

Answer 1

一个简单的替代方法是使用＆lt; button＆gt;工具栏的标签。这样一来，它就不会丢失文本选择。

Answer 2

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

在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;
};

这是存储在您选择的地方。

如果浏览器符合DOM Range的w3c（即除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);

Webkit，IE取消选择文本

2 个答案: