jQuery .focus() works differently in each browser. How to prevent that?

Question

When I try to do .focus() I expect to set focus on input element and to see cursor after last character of the value. And I see it in IE.

In safari/chrome input gets focus and all text is selected. In firefox/opera input gets focus, but cursor is in the beginning.

What could I do to prevent that and get correct behavior for all browsers?

An example is here: http://jsbin.com/ozojol/edit#javascript,html

PS. focus().val('').val(value) method doesn't work in IE... What other workarounds exist?

What version of Firefox, and on what OS? Firefox 13.0.1 on Windows 7 puts the cursor after the value. — Anthony Grist, Jul 02 '12 at 15:36
OSX, FireFox 13.0 :) I will try 13.0.1 later, but it works differently in other browsers :) And I'm trying to find solution how to prevent that. — ValeriiVasin, Jul 02 '12 at 15:40

score 7 · Accepted Answer · edited May 23 '17 at 12:24

7

You can use the input's selectionStart and selectionEnd properties in most browsers and some nasty TextRange stuff in IE < 9. Here's some code adapted from an answer to a similar question.

Demo: http://jsbin.com/azapuy

Code:

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

var input = $('#i')[0];
input.focus();
moveCaretToEnd(input);

edited May 23 '17 at 12:24

Community

1
1

answered Jul 02 '12 at 15:51

Tim Down

318,141
75
454
536

Works in FF 16 - nice! You have to be careful to call moveCaretToEnd with the actual dom element (as shown above), not the jQuery object. The latter does not work. – sieppl Nov 01 '12 at 10:56

Farahmand · Answer 2 · 2012-07-02T17:02:49.293

1

There is a great lightweight plugin to move the caret to the end of the content within your element. jQuery Caret

Live Demo

edited Jul 02 '12 at 17:02

answered Jul 02 '12 at 15:42

Farahmand

2,731
1
24
27

This doesn't work on Firefox 3.6. Does work in: IE7, IE8, IE9, Chrome 19 and Safari 4. Moves to first position in: Opera 11. – Ricardo Souza Jul 02 '12 at 16:03
@rcdmk I have updated my answer. **[jQuery Caret](https://github.com/DrPheltRight/jquery-caret)** will tackle the issue. – Farahmand Jul 02 '12 at 16:21
jQuery Caret doesn't work in IE8. maybe others, haven't tried. – ValeriiVasin Jul 02 '12 at 17:10
@InviS [Jquery Caret](https://github.com/DrPheltRight/jquery-caret) works in IE8 (My OS: Windows XP). Did you test it w/ this **[jsFiddle](http://jsfiddle.net/uksXG/)**? – Farahmand Jul 02 '12 at 18:35
@Fari I've tested it in BrowserStack :) OSX. – ValeriiVasin Jul 02 '12 at 21:51

score 0 · Answer 3 · answered Jul 02 '12 at 15:56

0

The only common behavior is the select(), that selects the input text in all major browsers (can't confirm if it works in all browsers).

answered Jul 02 '12 at 15:56

Ricardo Souza

16,030
6
37
69

jQuery .focus() works differently in each browser. How to prevent that?

3 Answers3