jQuery を使用してテキスト領(lǐng)域のカーソル位置を設(shè)定する

ユーザーにテキスト フィールドの特定の部分に注目してもらいたい場合は、カーソルを次の位置に置く必要がある場合があります。フィールド內(nèi)の特定のオフセット。 jQuery を使用してこれを?qū)g現(xiàn)するには、setCursorPosition 関數(shù)を?qū)g裝できます。

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

この関數(shù)を適切に配置すると、目的のオフセットを指定して呼び出してカーソル位置を設(shè)定できます。

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

この例では、#input フィールドがフォーカスを受け取ると、カーソルは (先頭から數(shù)えて) 4 番目の文字の後に配置されます。 0).

別のアプローチは、受け入れられた回答で提供されている selectRange 関數(shù)を使用することです:

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

この関數(shù)を使用すると、カーソルを配置してテキストの範(fàn)囲を選択できます:

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

これらのソリューションは、jQuery を使用してカーソル位置を設(shè)定し、テキスト フィールド內(nèi)のテキスト選択を操作するためのさまざまなメソッドを提供します。

以上がjQueryを使用してテキスト領(lǐng)域のカーソル位置を設(shè)定する方法?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。