jquery input 비밀번호 표시, 숨김 기능 구현

jquery input 비밀번호 표시, 숨김 기능 구현

 

아래와 같이 로그인이나 회원가입 시에 비밀번호를 표시하거나 숨기는 기능을 사용하곤 한다.

input password를 사용하면 쉽게 처리할 수 있다.

 

 

1. type이 password인 input과 비밀번호 표시/숨김 버튼을 생성한다.

<input type="password" id="pwd" name="pwd" required>
<button type="button" onClick="showPwd(this)">비밀번호 표시</button>

   이 때, 버튼 onClick에 비밀번호 표시/숨김 함수를 포함한다.

 

2. jquery로 비밀번호 표시/숨김 함수를 작성한다.

function showPwd(e) {
	if ($(e).text() == "주민번호표시")
	{
		$("#pwd").attr('type','text');
		$(e).text("주민번호숨김");
	}
	else {
		$("#pwd").attr('type','password');
		$(e).text("주민번호표시");
	}
}

 

끝.

그냥 input password를 쓰면 되는걸 마스킹이니 정규식이니 열심히 개발하던 나...

 

 

반응형