How to select all on focus in input using JQuery?

Last Updated : 31 Oct, 2019

The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields.
Syntax:

$("selected element").select();

//Select all Input field on focus
$("input").select();
//Select Input field on focus whose type="text"
$("input[type='text']").select();
//Select input field using its id="input-field"
$("#input-field").select();

Example:
In below example, select all made on input element of the form using focus, focus and click event.

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src=" 
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 
"> 
    </script> 
    <style> 
        input { 
            margin: 12px; 
        } 
          
        ::-moz-selection { 
            /* Code for Firefox */ 
            color: white; 
            background: red; 
        } 
          
        ::selection { 
            color: white; 
            background: red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <form action="/action_page.php" 
          autocomplete="off"> 
        First name: 
        <input type="text" 
               name="fname" 
               value="Geeks"
               required> 
        <br> Last name: 
        <input type="text"
               name="lname"
               value="forGeeks"
               required> 
        <br> E-mail: 
        <input type="email" 
               name="eid" 
               value="[email protected]" /> 
        <br> Password: 
        <input type="password" 
               name="upwd" 
               value="********"
               required maxlength="8"> 
        <br> User Age: 
        <input type="number" 
               name="Test"
               min="10" 
               value="24" 
               max="80" 
               required/> 
        <br> Your web Profile: 
        <input type="url" 
               name="Test" 
               value="http://geeksforgeeks.org"
               required /> 
        <br> 
        <input type="submit" value="Submit"> 
    </form> 
    <script> 
        $("input[type='text']").on("click", function() { 
            $(this).select(); 
        }); 
        $("input").focus(function() { 
            $(this).select(); 
        }); 
        $("input").focusin(function() { 
            $(this).select(); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

How to create a Search Input using jQuery Mobile ?

VigneshKannan3

Improve

Article Tags :

How to select all on focus in input using JQuery?

Similar Reads

Thank You!

What kind of Experience do you want to share?