ブラウザ間で ContentEditable のカーソル位置を保持する方法

ContentEditable でのカーソル位置の設定

contentEditable 内のカーソル位置の設定

さまざまなブラウザでは困難になる可能性があります。デフォルトの動作では、通常、最後の既知の位置に関係なく、カーソルがテキストの先頭に配置されます。この課題を克服するには、カスタマイズされたソリューションが必要です。

クロスブラウザ ソリューション

この問題に対処するには、次のソリューションを検討してください:

• saveSelection() 関数を使用してフォーカスが失われたときに現在のカーソル位置を保存します。
• restoreSelection() 関数を使用してフォーカスが回復したときに選択を再確立します。

function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

クリック イベント処理 (オプション)

デフォルトでは、contentEditable

内をクリックすると、クリックした位置にカーソルが移動します。クリック時でも保存されたカーソル位置を維持したい場合は、次の関数を使用して onclick および onmousedown イベントをキャンセルします。

function cancelEvent(e) {
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

使用法

これらの関数をコードを作成するには、saveSelection() を

の onmouseup および onkeyup イベントに付加し、restoreSelection() を onfocus イベントに付加します。必要に応じて、cancelEvent() 関数を onclick イベントと onmousedown イベントにアタッチして、クリック時のカーソル位置を保持します。

このソリューションは、contentEditable

内でカーソル位置を保持するための包括的でブラウザを横断したアプローチを提供します。要素を使用して、編集可能領域を操作する際のユーザー エクスペリエンスを向上させます。

以上がブラウザ間で ContentEditable のカーソル位置を保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。