Question

I have this text box:

<input type="text" name="url" id="url-input" />

and this code:

var inputText = "Hello World";
$(document).ready(function() {
  $("#url-input").focus();
  $("#url-input").val(inputText);
});

As it is, the cursor is displayed at the end of the textbox after the words “Hello World” (no matter in which order I add focus or change the value). How can I move it to the front?

Thanks

EDIT – Here’s the jsFiddle: http://jsfiddle.net/dmRND/

Answer 1

In decent web browsers, you have access to the selectionStart and selectionEnd properties which represent the selection. When they are both 0, it comes down to no selection and the caret at the beginning:

$("#url-input").prop('selectionStart', 0)
               .prop('selectionEnd', 0);

http://jsfiddle.net/efek3/

Another thing of jQuery is chaining: $(...).func1().func2(), so you need the selector once only.

Yet another thing of jQuery is that most functions support objects as parameter so you could also do:

$("#url-input").prop({ selectionStart: 0,
                       selectionEnd:   0 });