JavaScript を使用してテキスト入力要素のテキストの末尾にカーソルを配置する質問する

Question

ほとんどのブラウザで動作させる簡単な方法があります。

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

ただし、いくつかのブラウザの癖により、より包括的な回答は次のようになります。

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

jQuery を使用する (リスナーを設定するため、それ以外には必要ありません)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Vanilla JSを使用 する（addEventこの答え）

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

癖

Chrome には、カーソルがフィールドに移動される前にフォーカスイベントが発生するという奇妙な癖があり、これが私の単純な解決策を台無しにします。これを修正するには、次の 2 つのオプションがあります。

タイムアウトを0ミリ秒（スタックが空になるまで操作を延期する）
イベントをからに変更できますfocus。mouseupフォーカスを追跡し続けない限り、ユーザーにとってこれはかなり煩わしいものになります。私はどちらのオプションもあまり好きではありません。

また、@vladkras は、Opera の古いバージョンの中には、スペースが含まれている場合に長さを誤って計算するものがあることを指摘しました。この場合は、文字列よりも大きい大きな数値を使用できます。

Answer 1