How to Set the Cursor Position in Text Areas Using jQuery?-JS Tutorial-php.cn

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

DDD

Release： 2024-12-08 14:14:10

Original

767 people have browsed it

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

Copy after login

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

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

Copy after login

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

Copy after login

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

Copy after login

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!