How do you set the cursor position using JavaScript in IE8 and older?

Question

I need to set the cursor position of an input. I can get it to work fine in Chrome, but I'm having trouble with IE. I've found code that works fine in IE9/10, but I can't find anything that works in IE8 and older.

This is what I have for Chrome:

var cursorPosition = 5;
var textArea = $('.the-input-I-Need');
textArea[0].selectionStart = cursorPosition;
textArea[0].selectionEnd = cursorPosition;
//now the cursor would be at the 5th spot in the input

Anyone know a way to do this for IE? I can use jQuery, but no other plugins.

FWIW, the word you're looking for is "caret", not "cursor". – EricLaw Aug 16 '13 at 06:32 — EricLaw, Aug 16 '13 at 06:32

score 2 · Answer 1 · edited May 23 '17 at 11:50

There's a question regarding getting and setting of the caret position in IE on this question: Get caret position in textarea (IE)

It also references an answer for actually getting the caret position here: How to get the start and end points of selection in text area?

There's a healthy amount of code that's specific to dealing with IE, but it will accomplish what you're trying to do. Note that the getter function returns a selection range, just as the setter can be used to set a selection range. In this case, you'd just call it with startOffset equaling endOffset:

setSelection(el, startOffset, endOffset);

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionStart);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

You named your function 'setSelectionRange' but you call it using 'setSelection' — Justin Russo, Feb 26 '15 at 19:38

How do you set the cursor position using JavaScript in IE8 and older?

1 Answers1