Place the cursor on the end of the text box in focus.

Question

Question:

When a specific text field gains focus, position the cursor at the end of the text field. The solution should work with IE7, Opera, Chrome and Firefox.
To make things a little easier, this behavior is only necessary when the current value of the text field is a fixed value. (Say "INIT")

Incomplete solutions:

One would expect this to be quite simple, but I could not find an answer on SO that works in all browsers. The following answers do NOT work:

$("#test").focus(function() { // This works for Opera only // Also tested with $(this).val($(this).val()); if (this.value == "INIT") { this.value = ""; this.value = "INIT"; } }); $("#test").focus(function() { // This works for IE and for Opera if (this.value == "INIT") { setCaretPosition(this, 4); } }); 

I got the setCaretPosition function from SO questions and saw it on different blogs as well:

 function setCaretPosition(ctrl, pos) { if (ctrl.setSelectionRange) { //ctrl.focus(); // can't focus since we call this from focus() // IE only ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { // Chrome, FF and Opera var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); // Also tested with this range.moveStart('character', pos); // and this line in comment range.select(); } } 

Fiddle

I installed jsFiddle .

Answer 1

Try the following:

 $("input").on("focus", function() { if (this.value === "INIT") { var input = this; setTimeout(function() { if (input.createTextRange) { var r = input.createTextRange(); r.collapse(true); r.moveEnd("character", input.value.length); r.moveStart("character", input.value.length); r.select(); } else { input.selectionStart = input.selectionEnd = input.value.length; } }, 13); } }); 

http://jsfiddle.net/azBxU/4/

Answer 2

This should work:

 $("#test").focus(function() { var $this = $(this); var value = $this.val(); if (value === "INIT") { setTimeout(function() { $this.val(value); }, 0); } }); 

Answer 3

I found a jQuery plugin that worked for me for a long time. I can’t remember where.

 (function($) { jQuery.fn.putCursorAtEnd = function() { return this.each(function() { $(this).focus() // If this function exists... if (this.setSelectionRange) { // ... then use it // (Doesn't work in IE) // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh. var len = $(this).val().length * 2; this.setSelectionRange(len, len); } else { // ... otherwise replace the contents with itself // (Doesn't work in Google Chrome) $(this).val($(this).val()); } // Scroll to the bottom, in case we're in a tall textarea // (Necessary for Firefox and Google Chrome) this.scrollTop = 999999; }); }; })(jQuery);