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

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

テキスト領域にカーソルを配置するとユーザー エクスペリエンスが向上しますが、jQuery を使用してこれを実現するにはどうすればよいですか?

jQuery では、setCursorPosition と呼ばれるカスタム関数を実装してカーソル位置を設定できます。提供したコードの更新バージョンは次のとおりです。

new function($) {
  $.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();
    }
  };
}(jQuery);

この関数を使用すると、次のようにカーソル位置を設定できます。

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

これにより、カーソルが 4 番目の文字に配置されます。ユーザーがフィールドにフォーカスすると、テキスト領域内で次のような結果が得られます。 "abcd|efg."

あるいは、より柔軟な別の jQuery ソリューションが存在します。

$.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();
      }
  });
};

この selectRange 関数を使用すると、開始とカーソルの終了位置を設定し、テキスト選択をより詳細に制御できるようにします:

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

これらの jQuery ソリューションを使用すると、正確にテキスト領域内のカーソル位置を設定して、ユーザーの対話性を高めます。

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