input输入框默认文字,点击消失

<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}">

<html>
  <head>
  <title>input test</title>
  <style type="text/css">
    .default { font-weight:bold; color:#787878; }
    .puton{ font-weight:normal; color:black; }
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var b=true;
    $("#username").click(
    function(){
      if(b==true){
      $(this).val("");
      $(this).attr("class","puton");
      b=false;
    }
  }
 )
$("#username").blur( function(){
    if( $(this).val()==""){
    $(this).val("Enter your name");
    $(this).attr("class","default");
    b=true;
     }
}
)
});
$(document).ready(function(){
  var b=true;
  $("#password").click( function(){
      if(b==true){
        $(this).val("");
        $(this).attr("type","password");
        $(this).attr("class","puton");
        b=false;
      }
  })
$("#password").blur( function(){
  if( $(this).val()==""){
    $(this).val("Enter your password");
    $(this).attr("type","text");
    $(this).attr("class","default");
    b=true;
  }

  }
)
});
</script>
</head>
<body>
<div id="content">
  <form method="POST" id="user" action="">
    User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/>
    PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password" />
    <input type="submit" name="sub" value="login" />
  </form>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/jsingleegg/p/3522446.html