当前位置: 代码迷 >> Web前端 >> 密码框展示提示信息
  详细解决方案

密码框展示提示信息

热度:158   发布时间:2012-08-13 13:21:53.0
密码框显示提示信息
<html>
	<head>
	<script type="text/javascript" src="jquery-1.7.1.js" ></script>
		<script type="text/javascript">
$(document).ready(function(){
$("#password_input").blur(function(){
if($(this).val()=="")
{
$(this).val("请输入密码");

if($(this).attr("type") == "password"){
$(this).hide();
$('#password_text').show();
$('#password_text').val("请输入密码");

}
else{
     var pass = $('#password_text').val();
     if(pass.length<1){
      $(this).hide();
       $('#password_text').show();
     }
   }
 }
});
$("#password_text").focus(function(){
 if($(this).val()=="请输入密码")
 {
  $(this).val("");
   if($(this).attr("type")=="text"){
     $(this).hide();
     $('#password_input').show();
     $('#password_input').val("");
     $('#password_input').focus();//加上
   }else{
     var pass = $('#password_input').val();
     if(pass.length<1){
      $(this).hide();
       $('#password_text').show();
     }
   }
 }
})
})
</script>
	</head>
	<body>
	<input type="password" name="password" style="display:none;" value="" id="password_input"/>
<input type="text" value="请输入密码" id="password_text" value="请输入密码解屏"  Style="color:#8C8C8C"/>
	</body>
</html>

  相关解决方案