jquery - Javascript: cross browser solution for selecting all text inside a textbox on focus - Stack Overflow

admin管理员组

文章数量:1287622

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

/

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

---

This works* in Chrome

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

/

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'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/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/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.

• javascript
• jquery

Share Improve this question Follow asked Jul 27, 2011 at 23:34 ajbeavenajbeaven 9,5821313 gold badges8383 silver badges128128 bronze badges 1

• 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 Commented Jul 27, 2011 at 23:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/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.

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) {

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

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/7rYLV/

本文标签： jqueryJavascript cross browser solution for selecting all text inside a textbox on focusStack Overflow