ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery テキスト領域でカーソル位置を設定するにはどうすればよいですか?

jQuery テキスト領域でカーソル位置を設定するにはどうすればよいですか?

DDD
リリース: 2024-12-28 05:55:13
オリジナル
126 人が閲覧しました

How Can I Set the Cursor Position in a jQuery Text Area?

jQuery テキスト領域のカーソル位置の設定

課題:

テキスト内のカーソル位置を設定するメソッドが必要ですjQueryを使ったエリア。望ましい動作は、フィールドがフォーカスされているときにカーソルを特定のオフセットに配置することです。

jQuery ソリューション:

$.fn.setCursorPosition = function(pos) {
  if (this.setSelectionRange) {
    this.setSelectionRange(pos, pos);
  } else if (this.createTextRange) {
    var range = this.createTextRange();
    range.collapse(true);
    if (pos < 0) {
      pos = $(this).val().length + pos;
    }
    range.moveEnd("character", pos);
    range.moveStart("character", pos);
    range.select();
  }
};
ログイン後にコピー

使用法:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});
ログイン後にコピー

これにより、テキストの 4 番目の文字の後にカーソルが配置されます。

代替解決策:

$.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, 5); // select a range of text
$('#elem').selectRange(3); // set cursor position
ログイン後にコピー

以上がjQuery テキスト領域でカーソル位置を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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