로그인 등에 사용하는 input type 속성을 password와 text 간단하게 변경하기(javascsript)

이번에 새로 바뀐 지음빌더 로그인 화면.

과거에는 아이디와 비밀번호를 입력하는 창 앞에 텍스트로 입력칸 설명이 붙었다. 그런데 요즘은 input 입력 창 안에 옅은 색으로 아이디, 비밀번호라는 입력 항목 이름을 넣는다.

이렇게 비밀번호 입력 칸에 포커스가 발생하면 "비밀번호"라는 한글은 사라지고 input의 type 속성은 password로 바뀌게 할 수 있다.

전에는 자바스크립트를 이용해서 type 속성이 text인 것과 password 인 것 두 개를 만들어 놓고 click이나 keypressdown 이벤트가 발생하면 두 개의 input를 바꿔치기 하는 방법을 많이 썼다. 왜냐하면 처음부터 type 속성을 password로 하면 "비밀번호"라는 한글은 "****" 이렇게 보이기 때문이다.

이걸 jQuery로 아주 간단하게 해결 할 수 있다.

<input type="text" name="pswd" id="pswd" value="비밀번호" onfocus="cngtype()">
....
<script>
function cngtype(){
    if($("#pswd).val() == "비밀번호") {
        $("#pswd).val("");
        $("#pswd).attr("type", "password"); //-- input type 속성을 text에서 password로 변경한다.
    }
}
</script>

사실 jQuery로 가능하다면 예전부터 Javascript로 가능했다는 것이다. 그 때는 왜 이런 생각을 못했을까. 어쨌든 개발 환경은 점점 좋아지만 그런만큼 고객들의 요구사항은 더욱 까다로워진다. 그래도 개발은 즐겁게...