首頁 >web前端 >js教程 >如何設定 jQuery 文字區域中的遊標位置?

如何設定 jQuery 文字區域中的遊標位置?

DDD
DDD原創
2024-12-28 05:55:13147瀏覽

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);
});

這會將遊標定位在文本中的第四個字元之後

替代解決方案:

$.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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn