Jquery Set Cursor Position in Text Area

javascript

prompt-engineering

functions

callbacks

byAnton Shumikhin·Sep 7, 2024

Put the cursor in a textarea on a particular spot using jQuery:

function setCursor(pos) {
  var txtArea = $('#textareaID');
  txtArea.focus().get(0).setSelectionRange(pos, pos);
}

setCursor(10); // Moves cursor to the 10th character like a Ninja

Identify your textarea's ID and call setCursor with the your desired character index, voila!

Modifying jQuery: Compatibility & Elegance

Let's extend jQuery capabilities with a simple function that smoothly merges with jQuery's beautiful interface for a nice chained workflow:

$.fn.setCursorPosition = function(pos) {
  return this.each(function() {
    if (this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
};

Now enjoy a clean, intuitive way to set the cursor position like a king:

$('#textareaID').setCursorPosition(10).val('New text').setCursorPosition(0); //Inserting and shifting like pro Tetris player

Cross-Browser Solutions: All Folks Included!

Let's consider older browsers' needs to ensure broader compatibility. setSelectionRange and createTextRange are two distinct methods supporting different browsers. This function is like a superhero, rescuing users of Chrome, Firefox, IE8 and IE11 alike!

Unified Cursor Movement in Different Browsers

Dive deeper with a more inclusive solution, adapting to different browsers:

function setCursorCrossBrowser(el, pos) {
  if (el.setSelectionRange) {
    el.focus();
    el.setSelectionRange(pos, pos);
  } else if (el.createTextRange) {
    var range = el.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select(); //Audience! We have set the stage 👏
  }
}

This gives a unified approach for different engines, delivering a consistent user experience no matter which browser they are using.

Cursor Behavior on Element Focus

You can set the cursor to a specific position when a textarea garners focus. Hold my coffee and watch this:

$('#textareaID').focus(function() {
  // Set cursor to a specific position on focus
  $(this).setCursorPosition(10); //Hey, no peeking before 10!
});

By attaching our function to the focus event, once the focus is on a cursor automatically moves to the 10th character.

Useful References

.val() | jQuery API Documentation — know more about how to get and set the value of a textarea using jQuery.
<textarea>: The Textarea element - HTML: HyperText Markup Language | MDN — the official element reference for HTML textarea.
jQuery focus() Method — delve deep into focusing elements using jQuery's function.
javascript - jQuery Set Cursor Position in Text Area - Stack Overflow — dive into community discussions and their solutions on cursor positioning in textareas.
HTMLInputElement: setSelectionRange() method - Web APIs | MDN — master how to select a range of text in inputs and textareas.
Selection and Range — learn about selection and range in JavaScript and DOM's context.
Textarea Tricks | CSS-Tricks - CSS-Tricks — discover a collection of handful tips and tricks for textareas.