JavaScript는 입력 상자(비밀번호 상자)에 프롬프트를 구현합니다_javascript 기술
- WBOY원래의
- 2016-05-16 15:20:392328검색
때때로 로그인 양식에 "사용자 이름을 입력하세요", "비밀번호를 입력하세요"와 같은 프롬프트 언어가 필요할 때가 있습니다. 사용자 이름은 말하기 쉽지만 비밀번호 상자에는 언어가 있습니다. 비밀번호 입력란에 입력한 내용이 클리어 코드로 표시되지 않아서 조금 번거롭습니다. type 속성이 동적으로 제어되면 호환성 문제가 발생합니다. 입력이 페이지에 이미 있으면 type 속성은 IE8 및 IE8 이하 브라우저에서 읽기 전용입니다. 그래서 다른 방법을 생각해 봐야 합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
위 코드는 우리의 요구 사항을 구현합니다. 비밀번호를 입력하면 비밀번호 모드로 입력됩니다.
구현 원리는 매우 간단합니다. 기본 상태에서는 텍스트 상자가 type="text"로 표시됩니다. 텍스트 상자를 클릭하면 원래 표시된 텍스트가 표시됩니다. 상자가 숨겨져 있습니다. 즉, 방금 교체했습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.