Take the 2-minute tour ×

What is a JavaScript or jQuery solution that will select all of the contents of a textbox when the textbox receives focus?

share|improve this question
@gdoron for some reason that link redirects to this question itself. –  Destrictor May 30 '13 at 13:01
@Destrictor, Yes, it should have been this: "Selecting text on focus using jQuery not working in Safari and Chrome" –  gdoron May 30 '13 at 18:54
The problem with most of these solutions is that they do not work correctly when changing the cursor position within the input field. Take a look at my answer here: stackoverflow.com/a/20826207/641452 –  Colin Breame Dec 29 '13 at 14:15

13 Answers 13

up vote 172 down vote accepted
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
share|improve this answer
Also just for extra info: "input[type=text]" now can be "input:text" regards –  Ricardo Vega Jan 26 '09 at 22:29
This doesn't seem to work for me on Chrome and the jQuery website says it is browser dependent. Can anyone else verify? –  Kenny Wyland Sep 13 '12 at 20:21
It looks like WebKit browsers interfere with this because of the mouseup event. I added this and it worked: $('input:text').mouseup(function(e) { return false; }); –  Kenny Wyland Sep 13 '12 at 20:25
Kenny is correct, but unfortunately 'mouseup' also affects Chrome spinner controls. Triggering off 'click' rather than 'focus' seems to solve that –  Richard Kennard Sep 12 '13 at 21:46
I use like this: $("input:text").select().focus(); –  Phuong Dec 26 '13 at 4:22
<input type="text" onfocus="this.select();" onmouseup="return false;" />
share|improve this answer
It's much nice to keep markup separated from script. –  Jonathan Sampson Jan 26 '09 at 18:08
Usually........ –  Derrick Apr 24 '12 at 23:31
+ onmouseup="return false" to stop deselect on click –  Anthony Johnston Jun 15 '12 at 7:27
Thank you @AnthonyJohnston! I was going INSANE really slowly... +1 –  Chris Kempen Jul 23 '12 at 16:46
+1 for some kind of stopEvent for mouseup, or this doesn't work reliably. The downside of doing that is that once the cursor is in the field, clicking somewhere within the selected text to position the cursor there doesn't work; clicks are effectively disabled. Still, for situations where selecting the whole text on focus is desirable, it's probably the lesser of two evils. –  enigment Aug 30 '12 at 13:23
$(document).ready(function() {
        .mouseup(function (e) {e.preventDefault(); });
share|improve this answer
This answer was the winner for me! Thanks! –  Matthew Patrick Cashatt May 1 '13 at 16:59
I love this answer! :) Thanks! –  Alex Jan 14 at 1:16
This is good. Thanks! The comment by enigment to Zach's answer gives one downside of preventing default of the mouseup event: "once the cursor is in the field, clicking somewhere within the selected text to position the cursor there doesn't work; clicks are effectively disabled. Still, for situations where selecting the whole text on focus is desirable, it's probably the lesser of two evils." –  JohnK Mar 4 at 19:11

This is not just a Chrome/Safari issue, I experienced a quite similar behavior with Firefox 18.0.1. The funny part is that this does not happen on MSIE! The problem here is the first mouseup event that forces to unselect the input content, so just ignore the first occurence.

    $(this).one('mouseup', function(event){

The timeOut approach causes a strange behavior, and blocking every mouseup event you can not remove the selection clicking again on the input element.

share|improve this answer
+1 This is the best solution I've seen for this so far. I'd highlight the usage of one instead of on to only stop the first mouseup event. –  Ryan Aug 6 '13 at 18:43
+1 for the usage of one to prevent a single mouseup. I really disliked not being able to select text with the mouse after the initial click. –  Pluc Oct 16 '13 at 17:50
+1 Very nice solution! –  Wade73 Nov 11 at 22:52
$(document).ready(function() {
share|improve this answer
+1 because this was what I needed, but it's not the answer to THIS question. –  Cros Dec 9 '09 at 12:05
Thanks, yes it was my mistake. –  Tomas Kirda Dec 11 '09 at 21:06
+1 This is work for me, not the rest answers .focus().select(); –  Aristos Dec 10 '13 at 9:36

my solution is to use a timeout. Seems to work ok

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
    }, 10);
share|improve this answer
This is the solution I use and prefer. I use a timeout value of 0 since that will cause it to be added to the end of the current event queue, which means it will run after the "mouseup" event. –  DavidM Sep 18 at 20:48

U mad guys... Jquery is not JavaScript whitch is more easy to use in some cases.

Look at this example:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

from Css trics

share|improve this answer
Maybe that's OK if you don't mind getting your markup and code all mixed up; most people try to keep their script 'unobtrusive' nowadays. Oh... and jQuery is Javascript. –  Andrew Barber Feb 22 '13 at 9:52
Thanks for the suggestion of onclick, works great. Not everyone uses jQuery so glad to see another option. –  Lukus Apr 25 '13 at 19:57

The answers here helped me up to a point, but I had a problem on HTML5 Number input fields when clicking the up/down buttons in Chrome.

If you click one of the buttons, and left the mouse over the button the number would keep changing as if you were holding the mouse button because the mouseup was being thrown away.

I solved this by removing the mouseup handler as soon as it had been triggered as below:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {

Hope this helps people in the future...

share|improve this answer
Nopes. u are giving a solution to a self-generated problem. If you look properly at the answer, they are binding mouseup to the text input fields only and not numbers. This problem should not come therefore –  Om Shankar Jul 3 '13 at 6:56
The problem with binding mouseup is that it interferes when moving the cursor within the field. This is a better solution, but if you tab into the field, then the next mousedown will be lost (and user will not be able to move the cursor with the mouse). That is better than losing all mousedowns! –  Colin Breame Dec 29 '13 at 13:41

I was able to slightly improve Zach's answer by incorporating a few function calls. The problem with that answer is that it disables onMouseUp completely, thereby preventing you from clicking around in the textbox once it has focus.

Here is my code:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;

This is a slight improvement over Zach's answer. It works perfectly in IE, doesn't work at all in Chrome, and works with alternating success in FireFox (literally every other time). If someone has an idea of how to make it work reliably in FF or Chrome, please share.

Anyway, I figured I'd share what I could to make this a little nicer.

share|improve this answer
There is an error in your code - the second method should be called "TextBoxMouseUp". Take a look at my answer which uses a similar approach. –  Colin Breame Dec 29 '13 at 14:21
@Colin Breame Oops - thanks. Corrected. –  Travis Dec 30 '13 at 15:17

I know inline code is bad style, but I didn't want to put this into a .js file. Works without jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
share|improve this answer

This will work, Try this -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Works in Safari/IE 9 and Chrome, I did not get a chance to test in Firefox though.

share|improve this answer
share|improve this answer
Because onclick doesn't give focus already? –  Luc Apr 14 at 22:53
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
    }, 1);        

Edit: Per @DavidG's request, I can't provide details because I'm not sure why this works, but I believe it has something to do with the focus event propagating up or down or whatever it does and the input element getting the notification it's received focus. Setting the timeout gives the element a moment to realize it's done so.

share|improve this answer
Please explain your answer rather than just pasting in some code. –  DavidG Jun 20 at 0:10

Your Answer


