zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    jquery-追加元素
    mssql-异常value '0000-00-00' can not be represented as java.sql.Date
    lucene-Field.Store解析
    mysql-删除日志文件命令详解
    js-读取上传文件后缀
    js-处理回车事件
    maven-腾讯SDK(QQ)接口java引入pom配置
    ps制作gif图片
    java-commons-HttpClient超时设置setConnectionTimeout和setSoTimeout
    js-比较两个日期的大小
  • 原文地址:https://www.cnblogs.com/jsingleegg/p/3522446.html
Copyright © 2011-2022 走看看