ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してテキスト入力の最後にカーソルを配置するにはどうすればよいですか?

JavaScript を使用してテキスト入力の最後にカーソルを配置するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-06 17:33:12
オリジナル
620 人が閲覧しました

How Can I Place the Cursor at the End of Text Input Using JavaScript?

JavaScript を使用した入力テキストの末尾へのカーソルの挿入

Web 開発の領域では、JavaScript はテキストの末尾にカーソルを配置するための堅牢なソリューションを提供します入力要素内。このトピックを詳しく掘り下げるために、簡潔なテクニックから始めて、さまざまなアプローチを検討します。

this.selectionStart = this.selectionEnd = this.value.length;
ログイン後にコピー

このスニペットは、カーソルを入力値の末尾に効果的に配置します。ただし、特定のブラウザでは、以下に示すように、より包括的な解決策を必要とする問題が発生します。

setTimeout(function() { that.selectionStart = that.selectionEnd = 10000; }, 0);
ログイン後にコピー

このバリエーションでは、setTimeout 関数を利用してカーソル位置の設定を延期し、それによって互換性の問題を最小限に抑えます。

jQuery 愛好家のために、リスナーを使用するアプローチを次に示します。

$('#el').focus(function() {
  var that = this;
  setTimeout(function() { that.selectionStart = that.selectionEnd = 10000; }, 0);
});
ログイン後にコピー

このコード スニペットjQuery を利用してフォーカス イベント リスナーを確立します。フォーカスされると、前の例と同じカーソル位置決め手法が展開されます。

以上がJavaScript を使用してテキスト入力の最後にカーソルを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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