How to select content inside a text box when loading a page?

Question

I am working on an application and I want the text box to be selected when the page loads, so when the user uses Ctrl + v, he inserts the contents inside the text box. Does anyone know how to do this? text field

<div> <input wicket:id="email-address" type="text" id="textbox-email" /> </div> 

Thanks!

Answer 1

you must set focus to your input:

 document.forms['your_form'].elements['your_textbox'].focus(); 

For your example above:

 document.getElementById('textbox-email').focus() 

---

After that you should select it:

either add this onfocus attribute to your inputs (better)

 <input type="text" onfocus="this.select()" /> 

Or use this jQuery snippet (best):

 $(document).ready(function() { $("#textbox-email").focus(function() { $(this).select(); } ); }); 

Pure Javascript:

 var element = document.getElementById('textbox-email'); element.onfocus = function() {element.select();} document.getElementById('textbox-email').focus(); 

Add all of this to the window.onload or onload attribute of the body tag.

Answer 2

The 3p3r answer is, of course, completely correct. If you want this to be reusable and reusable with a wicket, please see the wicket wiki page.

Answer 3

You can use the autofocus HTML5 attribute:

 <input type="text" autofocus /> 

It works, of course, only for one field.