How to select all text in HTML text input when clicked using JavaScript?

This example shows how to select entire input in a single click using javaScript.

Syntax:

<input onClick="this.select();" >

or

document.getElementById("ID").select();

Example-1: Using “this.select()”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Select all text in HTML 
      text input when clicked
    </title>
  
</head>
  
<body>
    <br> Input Text:
    <br>
    <input onClick="this.select();" 
           type="text"
           value="GeeksforGeeks">
</body>
  
</html>

chevron_right


Output:
Before click:

After click:

Example-2: Using DOM Input Text select() Method

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Select all text in HTML
      text input when clicked
    </title>
</head>
  
<body>
    Input Text:
    <br>
    <input type="text"
           value="GeeksforGeeks"
           id="eid">
  
    <button type="button" 
            onclick="myFunction()">
      Try it
  </button>
  
    <script>
        function myFunction() {
            document.getElementById(
              "eid").select();
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before click:

After click:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.