JavaScript は入力ボックス (パスワードボックス) にプロンプトを実装します

JavaScript は入力ボックス (パスワードボックス) にプロンプトを実装します_JavaScript スキル

WBOY

リリース： 2016-05-16 15:20:39

オリジナル

2338 人が閲覧しました

ログインフォームに「ユーザー名を入力してください」や「パスワードを入力してください」などのプロンプト言語が必要になる場合があります。ユーザー名については言うのは簡単ですが、パスワードボックスでは言語が必要です。「パスワードを入力してください」のようなメッセージが表示されますが、パスワードボックスに入力した内容はクリアコードで表示されないので少し面倒です。 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" でテキストボックスが表示され、テキストボックスをクリックすると、type="password" で表示されるパスワードボックスが表示されます。ボックスが非表示になっています。つまり、交換を行ったばかりです。