How to select all on focus in input using JQuery?

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.

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:

How to select all on focus in input using JQuery?

V

VigneshKannan3

Improve

Article Tags :

Similar Reads

How to find all checkbox inputs using jQuery ?

The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This

How to prevent a text field losing focus using jQuery ?

In this article, we will learn how to prevent a textfield or an input from losing focus using jQuery. This can be used in situations where user validation is required. There are two approaches that can be taken: Approach 1: We will be using the jQuery bind(), val(), preventDefault() and focus() meth

How to make Basic selects using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" h

How to find all button inputs and mark them using jQuery ?

jQuery is a small and fast JavaScript library with a motto: "Write Less And Do More". To use JQuery you can either download the jquery library on your local machine or include the jquery library in your HTML code. Keep in mind that before learning JavaScript you have a basic knowledge of HTML, CSS,

How to loop through input elements in jQuery ?

In this article, we will learn how to loop through input elements and display their current values in jQuery. This can be done using two approaches: Approach 1: In this approach, we will iterate over every input type which is of text type by using input[type=text] as the selector. Next, we will use