ブラウザ間で ContentEditable のカーソル位置を保持する方法-jsチュートリアル-php.cn

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

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 &amp;&amp; savedRange != null) {
        if (e &amp;&amp; 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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：`.then(function(a){ return a; })` は Promise の No-Op ですか? 次の記事：最新のブラウザで HTML リンクを無効にするにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事