ホームページ > ウェブフロントエンド > jsチュートリアル > プログラムで HTML テキストボックスにカーソルを配置するにはどうすればよいですか?

プログラムで HTML テキストボックスにカーソルを配置するにはどうすればよいですか?

DDD
リリース: 2024-12-10 12:40:14
オリジナル
1047 人が閲覧しました

How Can I Programmatically Position the Cursor in an HTML Textbox?

HTML テキストボックス内のキーボード キャレットの配置

テキストボックス内でキーボード キャレットを移動するには、JavaScript を使用して特定の位置を指定できます。

汎用関数:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if (elem) {
        if (elem.createTextRange) {  // IE specific
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else if (elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        } else {
            elem.focus();  // Fallback for browsers not supporting setSelectionRange
        }
    }
}
ログイン後にコピー

使用法:

  • elemId: 対象となるテキストボックスの ID
  • caretPos: 目的のキャレット位置 (先頭からの文字)

例:

50 文字のテキストボックスの 20 文字前にキャレットを設定する場合文字:

setCaretPosition('myTextbox', 20);
ログイン後にコピー

互換性:

  • IE6、Firefox 2、Opera 8、Netscape 9、SeaMonkey、Safari でテスト済み (Safari を除く)との組み合わせonfocus)

追加メモ:

このコードを使用して (addLoadEvent 内で)、キャレットをページ フォーカス上のすべてのテキストエリアの末尾に強制的にジャンプさせることもできます。関数):

for (var i = 0; i < textAreas.length; i++) {
    textAreas[i].onfocus = function() {
        setCaretPosition(this.id, this.value.length);
    }
}
ログイン後にコピー

以上がプログラムで HTML テキストボックスにカーソルを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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