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

0 0 1 minute read

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

Syntax:

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

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

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

<!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="zambiatek"> 
</body> 
  
</html> 

Output:
Before click:

After click:

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

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

Output:
Before click:

After click:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!