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

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 サイトの他の関連記事を参照してください。