Question

I have found many great answers to this from a year ago (when it still worked on our site as well), but it seems like firefox no longer works as expected when setting the cursor position or selection in textareas and inputs.

What I would like to do is focus on a textarea and place the cursor at the beginning. All of these fiddles work fine in Chrome and IE, but fail in FF. My preference is for a jQuery solution, but I’m not offended by simple js.

Fiddles (none work in FF 11 or 12):

$.fn solution

(function($) {
    $.fn.caret = function(pos) {
        var target = this[0];
        if (arguments.length == 0) { //get
            if (target.selectionStart) { //DOM
                var pos = target.selectionStart;
                return pos > 0 ? pos : 0;
            }
            else if (target.createTextRange) { //IE
                target.focus();
                var range = document.selection.createRange();
                if (range == null) return '0';
                var re = target.createTextRange();
                var rc = re.duplicate();
                re.moveToBookmark(range.getBookmark());
                rc.setEndPoint('EndToStart', re);
                return rc.text.length;
            }
            else return 0;
        }

        //set
        var pos_start = pos;
        var pos_end = pos;

        if (arguments.length > 1) {
            pos_end = arguments[1];
        }

        if (target.setSelectionRange) //DOM
        target.setSelectionRange(pos_start, pos_end);
        else if (target.createTextRange) { //IE
            var range = target.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos_end);
            range.moveStart('character', pos_start);
            range.select();
        }
    }
})(jQuery)

$('#input_tag').caret(1, 9);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="input_tag" value="hello beautiful world" />

prototype solution

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', start);
                this.moveStart('character', end);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 15);

<input type="text" id="input_tag" value="hello beautiful world" />

• Another $.fn solution (This one curiously works on page load, but not if you move the cursor and click "Run")

This is similar to this question, but I can’t comment on any of the answers and they are all older.

Please help. Bonus points if I am missing something simple. Over half our users are on FF and I am out of ideas.

Answer 1

Here’s the answer I finally found for anyone else running into this.

It used to be the case that animated CSS:visibility would just flip at the end of the timer. In my instance, however, I found that the activeElement and cursor location would not move at the same time. Because of this, things like setSelection don’t work as expected.

CSS transitions lists visibility as a supported property, but save yourself a headache and do not use it on elements that need focus or have similar handlers attached.