0

这是代码（现在已满）：

HTML：

<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 可编辑和更多... 更多

此代码用格式化的相同单词替换特定单词......
并且插入符号（光标）始终在替换单词之后保留！<<<“这是大事”
但只适用于IE，我非常喜欢重写这段代码以在FF上工作......但我做不到......太难了......

任何人都可以帮忙?



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


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

因为，moveToPotion 和 select 函数只能在 IE 上运行......直到那时它很容易......在 FF 上还有另一组函数可以实现......但我不知道如何编写另一个代码来执行一样的东西。你明白了吗？

4

1 回答 1

1

您可以通过在当前位置插入标记元素来保留插入符号的位置，然后再对元素的innerHTML. （顺便说一句，使用 DOM 方法遍历文本节点并在每个节点中搜索您想要的文本会比使用 更可取innerHTML）。

只要插入符号不位于单词“text”之内或附近，则以下工作。我还添加了一个计时器，以防止每次按下键时调用此函数并等待用户停止输入半秒钟。

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);
}
于 2010-08-03T23:35:51.507 回答