How to Set the Cursor Position in Text Areas Using jQuery?

Setting the Cursor Position in Text Areas with jQuery

When you want users to focus on a specific part of a text field, you may need to position the cursor at a certain offset within the field. To achieve this using jQuery, you can implement a setCursorPosition 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();
  }
};

With this function in place, you can set the cursor position by calling it with the desired offset:

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

In this example, when the #input field receives focus, the cursor will be positioned after the fourth character (counting from 0).

An alternative approach is to use the selectRange function provided in the accepted answer:

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

Using this function, you can position the cursor and select a range of text:

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

These solutions provide various methods to set the cursor position and manipulate text selection within text fields using jQuery.

The above is the detailed content of How to Set the Cursor Position in Text Areas Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!