Webkit, IE отменяет выделение текста

Я работаю над созданием плагина jQuery contentEditable. Я создал панель «инструментов» для выполнения действий с текстом, таких как выделение жирным шрифтом, курсивом и т. д., с помощью execCommand. Проблема в том, что когда вы выбираете текст и нажимаете одну из кнопок (div с событиями onclick), он отменяет выбор текста, который вы выбрали (все браузеры). Чтобы исправить это, я использовал:

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

Что хорошо работает в Firefox и Opera. я пытаюсь использовать

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

который предотвращает выделение текста в IE. Однако ни webkit, ни IE не работают. Я уже видел, как это делается с помощью кнопок ввода, но я бы предпочел использовать div. Любые идеи?


javascript internet-explorer webkit
person Nick    schedule 26.08.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Простой альтернативой является использование тегов ‹button› для панели инструментов. Таким образом, он не теряет выделение текста в первую очередь.

person dhundsness    schedule 03.06.2011

arrow_upward
0
arrow_downward

Я решил эту проблему, повторно выделив текст.

При наведении мыши я фиксирую информацию о выборе:

$.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);
person Nick    schedule 27.08.2010