jQuery Set Cursor Position in Text Area

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 user's 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

You can use these two functions given below:

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

}

Now, you can use the setCaretToPos this way:

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

Here's an 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">Sample text 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="Sample text 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>