Переписать код IE в код FF - PullRequest
Новая
       16

Переписать код IE в код FF

0 голосов
/ 03 августа 2010

Это код (теперь заполнен):

HTML:

<code> <div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

Javascript: 


function highlight(elem){
    // store cursor position
    var cursorPos=document.selection.createRange().duplicate();
    var clickx = cursorPos.getBoundingClientRect().left; 
    var clicky = cursorPos.getBoundingClientRect().top; 
    // copy contents of div
    var content = elem.innerHTML;
    var replaceStart = '';
    var replaceEnd = '';
    // only replace/move cursor if any matches
    // note the spacebands - this prevents duplicates
    if(content.match(/ test /)) {
        elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
        // reset cursor and focus
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select(); 
    }   
}

Просто работает на IE, несчастный.Любой может «настроить» этот код, чтобы работать и на FF! ...

Спасибо




Редактировать [1]:
Div Editable и More ... Подробнее

Этот код заменяет определенное слово тем же отформатированным словом ...
И курсор (курсор) всегда остается после слова, замененного!<<< "Это большое" <br>Но работает только в IE, и мне очень нравится переписывать этот код для работы в FF ... но я не могу этого сделать ... Это так сложно ...

Кто-нибудь может помочь?



Редактировать [2]: Моя проблема только с этой частью: 


        // reset cursor and focus
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select();

Потому что функции moveToPotion и select работают только в IE ... До тех пор это легко ... В FF есть еще один набор функций, которые делают это возможным ... Но я не знаю, как написать еще один код, который выполняеттоже самое.Ты понял?

1 Ответ

1 голос
/ 04 августа 2010

Вы можете сохранить положение каретки, вставив элемент маркера в его текущее местоположение, прежде чем выполнять замену элемента innerHTML.(Использование DOM-методов для обхода текстовых узлов и поиска каждого текста, который вы хотите, было бы предпочтительнее, чем использовать innerHTML, кстати).

Следующее работает, пока курсор не расположен внутриили рядом со словом «текст».Я также добавил таймер, чтобы не вызывать эту функцию при каждом нажатии клавиши и ждать, пока пользователь перестанет печатать на полсекунды. 

function insertCaretMarker() {
    var range;
    var markerId = "sel_" + new Date() + "_" + ("" + Math.random()).substr(2);
    if (window.getSelection) {
        var sel = window.getSelection();
        range = sel.getRangeAt(0);
        range.collapse(true);
        var markerEl = document.createElement("span");
        markerEl.appendChild(document.createTextNode("\u00a0"));
        markerEl.id = markerId;
        range.insertNode(markerEl);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(true);
        if (range.pasteHTML) {
            range.pasteHTML("<span id=\"" + markerId + "\">&nbsp;</span>");
        }
    }
    return markerId;
}

function restoreCaret(markerId) {
    var el = document.getElementById(markerId);
    var range;
    if (el) {
        if (window.getSelection && document.createRange) {
            var sel = window.getSelection();
            range = document.createRange();
            range.setStartBefore(el);
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(el);
            range.collapse(true);
            range.select();
        }
        el.parentNode.removeChild(el);
    }
}

function preserveCaretPosition(func) {
    var id = insertCaretMarker();
    func();
    restoreCaret(id);
}

var highlightTimer;

function highlight(elem) {
    if (highlightTimer) {
        window.clearTimeout(highlightTimer);
    }
    highlightTimer = window.setTimeout(function() {
        highlightTimer = null;
        var replaceStart = '<b>';
        var replaceEnd = '</b>';
        // only replace/move cursor if any matches
        // note the spacebands - this prevents duplicates
        if (elem.innerHTML.match(/ test /)) {
            preserveCaretPosition(function() {
                elem.innerHTML = elem.innerHTML.replace(/ test /g, ' ' + replaceStart + 'test' + replaceEnd + ' ');
            });
        }
    }, 500);
}
...