Selecting all text in HTML text input when clicked

Question

I have the following code to display a textbox in a HTML webpage.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

When the page displays, the text contains the Please enter the user ID message. However, I found that the user needs to click 3 times in order to select all the text (in this case it is Please enter the user ID).

Is it possible to select the entire text with only one click?

Edit:

Sorry, I forgot to say: I must use the input type="text"

Answer 1

I know this is old, but the best option is to now use the new placeholder HTML attribute if possible:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

This will cause the text to show unless a value is entered, eliminating the need to select text or clear inputs.

Answer 2

You can always use document.execCommand (supported in all major browsers)

document.execCommand("selectall",null,false);

Selects all text in the currently focused element.

Answer 3

Note: When you consider onclick="this.select()", At the first click, All characters will be selected, After that maybe you wanted to edit something in input and click among characters again but it will select all characters again. To fix this problem you should use onfocus instead of onclick.

Answer 4

If anyone want to do this on page load w/ jQuery (sweet for search fields) here is my solution

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Based on this post . Thanks to CSS-Tricks.com

Answer 5

Here's a reusable version of Shoban's answer:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

That way you can reuse the clear script for multiple elements.

Answer 6

The problem with catching the click event is that each subsequent click within the text will select it again, whereas the user was probably expecting to reposition the cursor.

What worked for me was declaring a variable, selectSearchTextOnClick, and setting it to true by default. The click handler checks that the variable's still true: if it is, it sets it to false and performs the select(). I then have a blur event handler which sets it back to true.

Results so far seem like the behavior I'd expect.

(Edit: I neglected to say that I'd tried catching the focus event as someone suggested,but that doesn't work: after the focus event fires, the click event can fire, immediately deselecting the text).