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

高洛峰
リリース: 2016-12-05 11:52:00
オリジナル
1442 人が閲覧しました

入力ボックス (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();
ログイン後にコピー


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