Cursor moves to the beginning of a text field

Question

I have a certain problem with IE8 (and only IE), when I focus an input field which has text in it the cursor moves to the beginning of that field. I'm trying to set the cursor at the end. I've googled around and found the following solution:

function setSelectionRange(input, selectionStart, selectionEnd) {
    input = document.getElementsByTagName("input")[0];
    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    }
}

"Input" here is simply an input field which is in a class (var inputElement = this.input;). The problem is that both "setSelectionRange" and "createTextRange". Am I doing something wrong? Is createTextRange defined only for TextArea?

@Edit: well it appears I was using something like "two objects" a js input and a jquery input, after changing input to document.getElementsByTagName("input")[0]; I am able to go to "createTextRange" branch but it still doesn't change the position of the cursor.

@Edit2: I changed the code a bit, now I'm getting the input from the document and it enters the if branch. But then the browser shows me:

Unexpected call to method or property access.

On this line var range = input.createTextRange();

@Edit3: To answer James' question. I have a class and in that class, the whole thing is associated with a jsp which has an input. In this class I set a focus handler for the field which is associated with the input form the jsp inputElement.focus(onInputFocus) then I have something like this:

function onInputFocus() {
    isFocused = true;
    valueDivElement.hide();
    labelElement.html(labelFocus);
    if (currentData.selectedEntityCode) {
        inputElement.val(currentData.selectedEntityCode);
        inputElement.attr('title', currentData.selectedEntityCode);
    } else {

    }

    var input = document.getElementsByTagName("input")[0];
    input.value = input.value;
}

The whole class is obviously much larger and this is not my code but I'm guessing this is the last thing that's being executed.

Solution

Sorry am I missing something here? Are you trying to set the cursor to the end, or highlight the range? You question would seem to imply the former, but the solution achieves the latter.

If you just want to set the cursor to the end, then the above function is not necessary. Simply do the following once focus has been set:

input.value = input.value; //assumes input is a DOM element.

See this JSFiddle: http://jsfiddle.net/7vdv6/

EDIT:

As far as i can seen there is a whole bunch of stuff that might be diverting focus away from your input:

isFocused = true;
valueDivElement.hide();
labelElement.html(labelFocus);
if (currentData.selectedEntityCode) {
    inputElement.val(currentData.selectedEntityCode);
    inputElement.attr('title', currentData.selectedEntityCode);
} else {

}

What happens if you add a focus() in between your last two lines:

var input = document.getElementsByTagName("input")[0];
input.focus();
input.value = input.value;

You've also got quite a messy mix of jQuery and standard JavaScript. For example, why are you using document.getElementsByTagName("input")[0] when you could use $("input:first")??

Comments

[Mateusz Dymczyk]

Yes I'm simply trying to set the cursor at the end. I already tried "input.value = input.value;" but somehow it didn't wor, the cursor still automatically goes to the beginning.

[James Wiseman]

When are you calling it? I.e. is it one of the last things you are doing? Can you show us the code surrounding it?