Set caret to end of textbox on focus

Question

The Question:

When a certain textbox receives focus, set the caret to the end of the textbox. The solution needs to work with IE7, Opera, Chrome and Firefox.
To make things a bit easier, this behavior is only needed when the current value of the textbox is a fixed value. (Say 'INIT')

Incomplete Solutions:

One would expect this to be pretty simple but I couldn't find an answer on SO that works on 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 aswell:

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've setup a jsFiddle.

Can you be more specific about where and how it doesn't work? — jonvuri, Oct 25 '12 at 14:47

Esailija · Accepted Answer · 2012-10-25T14:54:11.270

4

Try this:

$("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/

edited Oct 25 '12 at 14:54

answered Oct 25 '12 at 14:46

Esailija

138,174
23
272
326

Why did you set the timeout to 13ms? – surj Oct 25 '12 at 14:54
Great! This works for Opera, Chrome and Firefox. Already got something for IE so I can finally put this behind me. Many thanks :) – Laoujin Oct 25 '12 at 14:55
Thank you thank you thank you. This works in ie compatibility mode. – Jared Beach Jan 10 '14 at 18:15

score 0 · Answer 2 · answered Oct 25 '12 at 14:48

0

This should work:

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

answered Oct 25 '12 at 14:48

surj

4,706
2
25
34

This only works in Chrome. If I only get a solution for FF, I can combine the 3 solutions to get it working for all browsers :) – Laoujin Oct 25 '12 at 14:52

score 0 · Answer 3 · answered Oct 25 '12 at 14:57

I found a jQuery plugin that's been working for me for a long time. Can't remember where though.

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

Set caret to end of textbox on focus

3 Answers3