ログイン時のテキストボックスとパスワードボックスの切り替え
4414 ワード
実装効果:デフォルトでは、入力したパスワードのinputボックスに「パスワード」のヒントが表示され、クリックすると通常のパスワードボックスとなって暗号化されます.
火狐の中でinputタグのtype属性を修正することで簡単にこの効果を実現できますが、IEは別ですね.また、JQueryは安全性を考慮して、そうさせない.
1、HTMLコード:
2、JSコード(Jqueryのインポートに必要なJSファイルを覚えている):
火狐の中でinputタグのtype属性を修正することで簡単にこの効果を実現できますが、IEは別ですね.また、JQueryは安全性を考慮して、そうさせない.
1、HTMLコード:
<body onkeydown="if (event.keyCode==13) {checkLogin();return false;}" >
<div class="login-div">
<form name="loginForm" id="loginForm" method="post" action="">
<h1 class="tit"> </h1><!-- -->
<p id="logintitle">${appError}</p><br /><!-- -->
<div class="inp"><input type="text" value=" " class="infoInput" name="userName" maxlength="20" id="userName" onfocus="inputFocus(this);" onblur="inputBlur(this);"/></div>
<div class="inp">
<input type="password" value=" " class="infoInput2" name="password" maxlength="20" id="password" onfocus="inputFocus(this);" onblur="inputBlur(this);" style="display:none;" />
<input type="text" value=" " class="infoInput2" name="pwd" maxlength="20" id="pwd" onfocus="inputFocus(this);" onblur="inputBlur(this);"/>
</div>
<div class="inp2"><input type="button" class="buttonface" value=" " onClick="checkLogin()" name="button" /></div>
</form>
</div>
</body>2、JSコード(Jqueryのインポートに必要なJSファイルを覚えている):
<script type="text/javascript">
//
if(self!=top){
top.location=self.location;
}
$(document).ready(function() {
$("#userName").attr("tabIndex","1");
if(jQuery.trim($("#logintitle").html())==""){
$("#logintitle").html(" ");
}
});
function checkLogin() {
var name = jQuery.trim($("#userName").val());
var pwd = jQuery.trim($("#password").val());
if (name == '' || pwd == '') {
$("#logintitle").empty().append(" ");
}else if(name == " " || pwd == ' '){
$("#logintitle").empty().append(" ");
} else {
$("#userName").val(jQuery.trim($("#userName").val()));
$("#password").val(jQuery.trim($("#password").val()));
$("#loginForm").submit();
}
}
function inputFocus(obj){
var id = $(obj).attr("id");
var val = jQuery.trim($("#"+id).val());
if(id=="userName"){
if(val==" "){// ，
$("#"+id).val("");
}
}
if(id=="pwd"){//
//document.getElementById("password").type="password";
// text ， password
$("#"+id).css("display","none");//
id="password";
$("#"+id).css("display","inline");//
$("#"+id).focus();
val=jQuery.trim($("#"+id).val());
if(val==" "){// ，
$("#"+id).val("");
}
}
}
function inputBlur(obj){
var id = $(obj).attr("id");
var val = jQuery.trim($("#"+id).val());
if(id=="userName"){
if(val==""){// ， “ ”
$("#"+id).val(" ");
}
}
if(id=="password"){//
if(val==""){// ， “ ”
$("#"+id).css("display","none");//
id="pwd";
$("#"+id).css("display","inline");//
$("#"+id).val(" ");
//document.getElementById(id).type="text";
}
}
}
</script>