Question

这是代码（现已满了）：

HTML：

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

使用Javascript：


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

只是在IE上讨厌，不高兴。任何人都可以“调整”这段代码，也可以在FF上工作！...

由于

编辑[1]：
Div Editable and More... More

此代码用格式化的相同单词替换特定单词...
插入符号后光标（光标）始终保持不变！＆LT;＆LT;＆LT; “这是大的” 但只是适用于IE，我非常喜欢重写这个代码来处理FF ...但是我不能这样做......它太难了......

任何人都可以提供帮助？

有

编辑[2]：我的问题只是这部分：


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(); 
    }   
}

因为，moveToPotion和select函数只适用于IE ...直到那时很容易...... 在FF上还有另一组函数可以实现......但我不知道如何编写另一个执行相同操作的代码。你知道了吗？

Answer 1

您可以通过在元素的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);
}

将IE代码重写为FF代码

1 个答案: