Javascript: cross browser solution for selecting all text inside a textbox on focus

Question

I'm after the following functionality:

user clicks on or tabs into a textbox
all text in the textbox is selected, unless the textbox already had focus, in which case the default clicking/selecting functionality should occur

Is this possible?

This works in Firefox 5

$('input[type="text"]').live('focus', function () {
    this.select();
});

http://jsfiddle.net/HmQxZ/13/

Chrome and IE8 selects all the text for only a split second

This works* in Chrome

$('input[type="text"]').live('click', function () {
    this.select();
});

http://jsfiddle.net/HmQxZ/12/

Firefox and IE8 selects all text but upon subsequent clicking, the text remains selected.

*kind of works, after textbox has focus, clicking on it alternates between selecting all text and being able to click where the blinking caret goes. This is probably acceptable.

I haven't tested it out, but does programatically selecting all of the text cause it to scroll to the top/beginning or bottom/end of the field the same way that it does when the user selects by pressing ctrl-A (assuming there is enough text entered to be able to scroll, obviously)? If so I'd try to avoid doing it on a mouse click event where the user was probably trying to click on the point where they want to start typing. — nnnnnn, Jul 27 '11 at 23:52

score 9 · Accepted Answer · answered Jul 27 '11 at 23:45

9

Just delay it by a millisecond with setTimeout:

$('input[type="text"]').live('focus', function() {
    var inp = this;
    setTimeout(function() {
        inp.select();
    }, 1);
});

http://jsfiddle.net/HmQxZ/14/

What's happening is some other browser event is setting the selection after you've selected the text. So, by waiting a millisecond, you let all the browser events finish, and then select the text. Nothing will undo it now.

answered Jul 27 '11 at 23:45

gilly3

87,962
25
144
176

Legend. All other answers still had the same problems with cross browser compatibility. Do you know what the other event is that would be causing this? – ajbeaven Jul 27 '11 at 23:52
@ajbeaven I'd try an event.preventDefualt() it must be that your event is being overriden by the default (that selects nothing): http://api.jquery.com/event.preventDefault/ – James Khoury Jul 28 '11 at 00:22
Your answer fixed the problem, adding `preventDefault` and `return false` like other answers suggested didn't help. – ajbeaven Jul 28 '11 at 01:02
@James try clicking twice on a textbox in firefox or IE8. Once anywhere on the textbox to select all text, and then again to try and move the caret to a position in the text. The second click re-selects all the text and doesn't position the caret. – ajbeaven Jul 29 '11 at 01:25
hmm, seem to be having another problem with this approach. See http://stackoverflow.com/questions/6869717/google-chrome-infinite-loops-and-selecting-text – ajbeaven Jul 29 '11 at 07:04

score 0 · Answer 2 · answered Jul 27 '11 at 23:36

0

You may want to add

event.preventDefault();
return false;

to your function (the first one). That may fix the other browsers.

Also, add event to the function sig:

$('input[type="text"]').live('focus', function (event) {

answered Jul 27 '11 at 23:36

Tom

8,509
7
49
78

try clicking twice on a textbox in firefox or IE8. Once anywhere on the textbox to select all text, and then again to try and move the caret to a position in the text. The second click re-selects all the text and doesn't position the caret. – ajbeaven Jul 29 '11 at 23:46

James Khoury · Answer 3 · 2011-07-28T23:37:14.627

0

You should remember to do a return false; event.stopPropagation(); event.preventDefault() like so:

$('input[type="text"]').live('click', function (event) {
    this.select();
    event.stopPropagation();
    event.preventDefault();
    return false;
});

http://jsfiddle.net/7rYLV/

edited Jul 28 '11 at 23:37

answered Jul 27 '11 at 23:36

James Khoury

21,330
4
34
65

score 0 · Answer 4 · answered Jul 27 '11 at 23:37

If you can use jQuery then you can do something like;

$("#myInputField").focus(function(){
    // Select input field contents
    this.select();
});

// Add this behavior to all text fields
$("input[type=text]").focus(function(){
    // Select field contents
    this.select();
});

Taken from HERE

Javascript: cross browser solution for selecting all text inside a textbox on focus

4 Answers4

Linked