JavaScript でテキスト入力要素の末尾にカーソルを確実に配置する方法

JavaScript でテキスト入力要素の末尾にカーソルを配置する

JavaScript を使用してテキスト入力要素の末尾にカーソルを配置するのは簡単です。特にフォーカスが要素に設定された後のタスク。最も効率的で簡単なアプローチを見てみましょう:

次のコード スニペットは、シンプルかつ効果的なソリューションを提供します:

this.selectionStart = this.selectionEnd = this.value.length;

この行は、入力値の長さを計算し、開始値と入力値の両方を設定します。カーソルをその位置に移動します。このメソッドは、ほとんどの主要なブラウザで機能します。

ただし、特定のブラウザには、より包括的な解決策を必要とする癖があります。

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

このコード スニペットでは、潜在的な問題に対処するために setTimeout() が使用されています。ブラウザの不一致。カーソル位置を任意の大きな数値 (例: 10000) に設定し、入力テキストの末尾を超えていることを確認し、基本的に末尾に配置します。

さらに、jQuery を利用して、フォーカスリスナー:

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

以上がJavaScript でテキスト入力要素の末尾にカーソルを確実に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。