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

カーソルを ContentEditable 要素の末尾に移動するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-11 01:50:02
オリジナル
970 人が閲覧しました

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

カーソルを Contenteditable エンティティの末尾に移動

カーソルを contenteditable 要素の末尾に配置する必要が生じたことはありますか。 Gmail のメモ ウィジェットに見られる機能はありますか?

解決策

contenteditable 要素については、Geowa4 の解決策は適用できません。カスタマイズされたアプローチが必要です:

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

それを採用するには、次のコード例に従うだけです:

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

互換性

この解決策は次のとおりです。 contenteditable をサポートするすべての主要なブラウザと互換性があります。

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

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