ホームページ > 記事 > ウェブフロントエンド > JavaScript は入力ボックス (パスワード ボックス) にプロンプトを実装します_JavaScript スキル
JavaScript は入力ボックス (パスワード ボックス) にプロンプトを実装します_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:20:392290ブラウズ
ログイン フォームに「ユーザー名を入力してください」や「パスワードを入力してください」などのプロンプト言語が必要になる場合があります。ユーザー名については言うのは簡単ですが、パスワード ボックスでは言語が必要です。 「パスワードを入力してください」のようなメッセージが表示されますが、パスワードボックスに入力した内容はクリアコードで表示されないので少し面倒です。 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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。