ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryを使用してカーソル位置を設定したり、テキスト領域でテキストを選択したりする方法は?

jQueryを使用してカーソル位置を設定したり、テキスト領域でテキストを選択したりする方法は?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-15 13:35:14854ブラウズ

How to Set the Cursor Position or Select Text in a Text Area Using jQuery?

jQuery を使用してテキスト領域のカーソル位置を設定する方法

$.fn.selectRange() 関数を使用すると、簡単に設定できますjQuery を使用して、カーソル位置を指定したり、テキスト領域内のテキスト範囲を選択したりします。

使用方法は次のとおりです。 it:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

この関数を使用すると、次のように単一の引数を指定してカーソル位置を設定できます:

$('#elem').selectRange(3); // set cursor position

または、次のように指定してテキストの範囲を選択できます。 2 つの引数:

$('#elem').selectRange(3,5); // select a range of text

この関数は、selectionStart プロパティとselectionEnd プロパティがブラウザでサポートされているかどうかを確認することによって機能します。存在する場合、それらを使用してカーソル位置または選択範囲を設定します。それ以外の場合は、ほとんどのブラウザでサポートされている setSelectionRange() メソッドが使用されます。最後に、これらのメソッドのどちらも使用できない場合、関数は Internet Explorer で使用できる createTextRange() メソッドの使用に戻ります。

この関数の使用方法の便利な例をいくつか示します。

  • テキスト領域内のすべてのテキストを選択します:
$('#elem').selectRange(0, $('#elem').val().length);
  • カーソルをテキストエリア内のテキストの終わり:
$('#elem').selectRange($('#elem').val().length);
  • テキストエリア内のテキストの特定の範囲を選択します:
$('#elem').selectRange(3, 7);

この関数のライブ デモは JsFiddle と JsBin で行われます。

以上がjQueryを使用してカーソル位置を設定したり、テキスト領域でテキストを選択したりする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。