ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用してテキスト ボックス (パスワード ボックス) にプロンプ​​トを入力する方法_JavaScript スキル

JavaScript を使用してテキスト ボックス (パスワード ボックス) にプロンプ​​トを入力する方法_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 15:23:221654ブラウズ

ログイン フォームに「ユーザー名を入力してください」や「パスワードを入力してください」などのプロンプト言語が必要になる場合があります。ユーザー名については言うのは簡単ですが、パスワード ボックスでは言語が必要です。 「パスワードを入力してください」のようなメッセージが表示されますが、パスワードボックスに入力した内容はクリアコードで表示されないので少し面倒です。 type 属性が動的に制御される場合、入力がページにすでに存在する場合、type 属性は IE8 および IE8 より前のブラウザでは読み取り専用になります。したがって、他の方法を考える必要があります。コードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<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" で表示されるパスワードボックスが表示されます。ボックスが非表示になっています。つまり、交換を行ったばかりです。


上記の内容は、JavaScript を使用してパスワード ボックスにプロンプ​​トを実装する方法について編集者が共有した知識です。気に入っていただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。