jsの最後の位置にフォーカスを移動する簡単な方法

入力ボックス (input/textarea) にフォーカスが当たったら、フォーカスを最後に移動すると、ユーザー エクスペリエンスが向上する場合があります。インターネット上の方法のほとんどは IE ブラウザ用です。

コードは次のとおりです:

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();

実際、createTextRange メソッドで範囲を作成した後、collapse メソッドを使用でき、パラメーターが false の場合は末尾に移動できるため、moveStart 行を削除できます。 。 Collapse(true) はカーソルを範囲の先頭に移動し、collapse(false) はカーソルを範囲の末尾に移動します。 Firefox などの標準ブラウザでは、w3c の setSelectionRange メソッドを使用できます。

コードは次のとおりです:

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}

setSelectionRange メソッドは input/textarea 要素にのみ適用されることに注意してください。他の非ネイティブの編集可能な要素のフォーカスは、選択オブジェクトの折りたたみメソッドに移動できます。

例:

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();