ホームページ > ウェブフロントエンド > CSSチュートリアル > IE6-8とOperaを除くすべてのブラウザで長いテキスト入力の最後までスクロールするにはどうすればよいですか?

IE6-8とOperaを除くすべてのブラウザで長いテキスト入力の最後までスクロールするにはどうすればよいですか?

Susan Sarandon
リリース: 2024-10-25 06:27:02
オリジナル
623 人が閲覧しました

How to Scroll to the End of a Long Text Input in All Browsers Except IE6-8 and Opera?

長いテキスト入力の最後までスクロールする

この状況では、画像セレクターがテキスト入力フィールドに過度に長いテキストを入力します。 URL の先頭を表示すると、最小限の情報が提供されます。テキスト フィールドを右端までスクロールして、URL の末尾を表示する解決策が求められます。

ブラウザの互換性

提案された解決策では、HTMLInputElement.setSelectionRange() を利用します。明示的にフォーカスを設定した後、入力値の末尾にカーソル位置を設定します。このメソッドは、IE6-8 と Opera を除くすべての主要なブラウザでサポートされています。

実装

このソリューションを実装するには、次の手順に従います。

  1. 入力フィールドの focus() を設定して、入力フィールドがアクティブであることを確認します。
  2. setSelectionRange(foo.value.length,foo.value.length) を使用して、入力フィールドの選択範囲を設定します。これにより、カーソルが入力値の末尾に配置されます。

コード例

<code class="javascript">var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);</code>
ログイン後にコピー

注意事項

このソリューションではテキスト フィールドを URL の末尾まで正常にスクロールしますが、小さな注意点があります。入力フィールドがフォーカスを失うと、URL の先頭の表示に戻ります。

以上がIE6-8とOperaを除くすべてのブラウザで長いテキスト入力の最後までスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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