Question

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

Answer 1

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

Live example with both a textarea and an input, showing use from jQuery:

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); }  $('#set-textarea').click(function() {   setCaretToPos($('#the-textarea')[0], 10) }); $('#set-input').click(function() {   setCaretToPos($('#the-input')[0], 10); });

<textarea id='the-textarea' cols='40' rows='4'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea> <br><input type='button' id='set-textarea' value='Set in textarea'> <br><input id='the-input' type='text' size='40' value='Lorem ipsum dolor sit amet, consectetur adipiscing elit'> <br><input type='button' id='set-input' value='Set in input'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

As of 2016, tested and working on Chrome, Firefox, IE11, even IE8 (see that last here; Stack Snippets don’t support IE8).