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>

  • 相关阅读:
    mysql复习
    常用函数
    contos7上安装rabbitmq
    linux笔试题
    发布脚本
    Arch最小化安装LXDE桌面环境
    Arch最小化安装X
    Arch安装详解
    Gentoo解决Windows双系统时间不同步的问题
    Gentoo安装详解(五)-- 安装X桌面环境
  • 原文地址:https://www.cnblogs.com/jsingleegg/p/3522446.html
Copyright © 2011-2022 走看看