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 でも動作させることができます!...

ありがとう




Edit[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方が、 を使用するよりも望ましいでしょう)。

次の例は、キャレットが「テキスト」という単語内または隣接していない限り機能します。また、キーが押されるたびにこの関数が呼び出されるのを防ぎ、ユーザーが入力を 0.5 秒停止するまで待機するタイマーも追加しました。

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 に答える