JQuery Set Cursor Position in Text Area

Question

JQuery Set Cursor Position in Text Area

How do you set the cursor position in a text field using jQuery? I've got a text field with content, and I want the users cursor to be positioned at a certain offset when they focus on the field. The code should look kind of like this:

$('#input').focus(function() {

  $(this).setCursorPosition(4);

});

What would the implementation of that setCursorPosition function look like? If you had a text field with the content abcdefg, this call would result in the cursor being positioned as follows: abcd|efg.

Java has a similar function, setCaretPosition. Does a similar method exist for javascript?

Update: I modified CMS's code to work with jQuery as follows:



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

    }

  }

}(jQuery);

html javascript jQuery

4 years ago by Bharatgxwzm

2 Answers

Login / Signup to Answer the Question.

Login Signup

**akshay1995** · Answer 1 · 2021-07-23T10:04:56

I have two functions:



function setSelectionRange(input, selectionStart, selectionEnd) {

  if (input.setSelectionRange) {

    input.focus();

    input.setSelectionRange(selectionStart, selectionEnd);

  }

  else if (input.createTextRange) {

    var range = input.createTextRange();

    range.collapse(true);

    range.moveEnd('character', selectionEnd);

    range.moveStart('character', selectionStart);

    range.select();

  }

}



function setCaretToPos (input, pos) {

  setSelectionRange(input, pos, pos);

}

Then you can use setCaretToPos like this:



setCaretToPos(document.getElementById("YOURINPUT"), 4);

**sandhya6gczb** · Answer 2 · 2021-07-28T13:43:21

Here's a jQuery solution:



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

        }

    });

};

With this, you can do



$('#elem').selectRange(3,5); // select a range of text

$('#elem').selectRange(3); // set cursor position

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

JQuery Set Cursor Position in Text Area

2 Answers

Login / Signup to Answer the Question.