Open In App

How to select all on focus in input using JQuery?

Improve
Improve
Like Article
Like
Save
Share
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.




<!DOCTYPE html>
<html>
  
<head>
    <script src="
">
    </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="carear@geeksforgeeks.org" />
        <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:



Last Updated : 31 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads