jQuery :password Selector

Quiz

The :password Selector in jQuery is used to select all <input> elements with a type attribute of "password".

Syntax

Following is the syntax of jQuery :password Selector −

$(":password")

Parameters

This selector will select the password input fields.

Example 1

In the following example, we are using the "jQuery :password" Selector to select all input fields with type = "password" −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":password").css("border", "2px solid red");
        });
    </script>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <label for="confirm-password">Confirm Password:</label>
        <input type="password" id="confirm-password" name="confirm-password"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

After executing the above program, the password input fields will be highlighted with solid red border.

Example 2

In this example, we are selecting all input fields with type = "password" and display an alert when focused −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all password input fields and display an alert when focused
            $(":password").focus(function(){
                alert("Password field focused");
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
    </form>
</body>
</html>

When we click on the password input fields, It will be focused and an alert will be popped on the screen.

jquery_ref_selectors.htm

Print Page