Open In App

How to select all on focus in input using JQuery?

Last Updated : 31 Oct, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report
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. html 
<!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:

V
VigneshKannan3
Improve
Article Tags :

Explore

Lightbox