jQuery를 사용한 패스워드 입력 필드 선택 방법

jQuery를 사용하면 웹 개발에서 다양한 요소를 손쉽게 다룰 수 있습니다. 특히, 패스워드 입력 필드를 선택하고 조작하는 것도 간단한데요. 아래 예제를 통해 jQuery를 사용하여 패스워드 입력 필드를 다루는 방법을 알아보겠습니다.

예제 1: 모든 패스워드 입력 필드 선택하기

$(document).ready(function() {
    var passwordFields = $("input[type='password']");
    passwordFields.css("border", "2px solid red");
});

이 예제는 페이지에 있는 모든 패스워드 입력 필드를 선택하고 그 경계를 빨간색으로 변경합니다.

예제 2: 특정 폼 안의 패스워드 입력 필드 선택하기

$(document).ready(function() {
    var passwordFields = $("#loginForm input[type='password']");
    passwordFields.css("background-color", "#ffffcc");
});

이 예제는 id가 "loginForm"인 폼 안에 있는 패스워드 입력 필드를 선택하고 배경색을 연한 노랑색으로 변경합니다.

예제 3: 패스워드 입력 필드에 이벤트 추가하기

$(document).ready(function() {
    $("input[type='password']").focus(function() {
        $(this).css("box-shadow", "0 0 5px rgba(255, 0, 0, 0.5)");
    });
    $("input[type='password']").blur(function() {
        $(this).css("box-shadow", "none");
    });
});

이 예제는 패스워드 입력 필드에 포커스되면 그 주변에 빨간색 그림자를 추가하고 포커스가 해제되면 그림자를 제거합니다.