jQuery :password 選擇器



jQuery 中的:password 選擇器用於選擇所有型別屬性為“password”的<input> 元素。

語法

以下是 jQuery :password 選擇器的語法:

$(":password")

引數

此選擇器將選擇密碼輸入欄位。

示例 1

在下面的示例中,我們使用“jQuery :password”選擇器來選擇所有型別為“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>

執行上述程式後,密碼輸入欄位將以實線紅色邊框突出顯示。

示例 2

在這個示例中,我們選擇所有型別為“password”的輸入欄位,並在獲得焦點時顯示警報:

<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>

當我們點選密碼輸入欄位時,它將獲得焦點,並在螢幕上彈出警報。

jquery_ref_selectors.htm
廣告
© . All rights reserved.