Selecting all text in HTML text input when clicked

javascript html textinput
Questions picture Questions · Nov 1, 2010 · Viewed 521.8k times · Source

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

Boris Pavlović picture Boris Pavlović · Nov 1, 2010

You can use this javascript snippet:

<input onClick="this.select();" value="Sample Text" />

But apparently it doesn't work on mobile Safari. In those cases you can use:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Related questions

How to prevent keypress two digits after a decimal number?

I have got a task to prevent keypress two digits after a decimal number. My jquery file is $(function(){ $('#name').bind('paste', function(){ var self = this; setTimeout(function() { if(!/^[a-zA-Z]+$/.test($(self).val())) $(self).val(''); }, 0); }); $('#salary').bind(…

Read More
Get value of <input type="number"> with JS when it contains non-numeric characters

This jsfiddle demonstrates the following issue. The simplest example is: <input id="number" type="number" value="1"> console.log(document.getElementById('number').value); This logs 1 as expected. THIS however: <input id="number" type="number" value="1A"> console.…

Read More
How to cancel edit/disable cached input (of type text) value?

I have an input of type text, from which I have already entered value 1234 it has been saved in cache as shown below. The problem here is that, it is extremely frustrating to select the textbox in the next row. …

Read More