ホームページ > ウェブフロントエンド > jsチュートリアル > ContentEditable 要素の末尾にキャレットを移動するにはどうすればよいですか?

ContentEditable 要素の末尾にキャレットを移動するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-09 07:04:02
オリジナル
256 人が閲覧しました

How to Move the Caret to the End of a ContentEditable Element?

Contenteditable 要素のキャレットの操作

問題: キャレットを効率的に末尾に移動するにはどうすればよいですかcontenteditable 要素は、Gmail のメモ ウィジェットで見られる動作を模倣していますか?

StackOverflow は、input 要素では機能するが、contenteditable 要素では失敗するソリューションを提供します。この記事では、contenteditable 要素に特化したカスタマイズされたアプローチを紹介します。

解決策:

contenteditable をサポートするブラウザの場合、次の JavaScript 関数で目的のキャレットの移動を実現できます。

function setEndOfContenteditable(contentEditableElement) {
    // Determine browser support
    var range, selection;
    if (document.createRange) {
        // Modern browsers
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        // IE 8 and lower
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        range.select();
    }
}
ログイン後にコピー

使用例:

ID 'txt1' の要素の末尾にキャレットを移動するには:

elem = document.getElementById('txt1');
setEndOfContenteditable(elem);
ログイン後にコピー

以上がContentEditable 要素の末尾にキャレットを移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート