用jquery实现输入框消失文字



用jquery实现输入框消失文字

Java代码 复制代码 收藏代码
  1. <html>   
  2. <head>   
  3.     <title>用jquery实现输入框消失文字</title>   
  4.     <style type=”text/css”>   
  5.         .default {   
  6.             font-weight: bold;   
  7.             color: #787878;   
  8.         }   
  9.     </style>   
  10.     <script type=”text/javascript” src=”/js/jquery/jquery-1.8.1.min.js”></script>   
  11.     <script type=”text/javascript”>   
  12.         $(document).ready(function() {   
  13.             $(“#keywords”).focus(function () {   
  14.                 var $this = $(this);   
  15.                 if ($this.val() == $this[0].defaultValue) {   
  16.                     $this.css(“color”,”#0cf”).val(“”);   
  17.                 }   
  18.             }).blur(function () {   
  19.                 var $this = $(this);   
  20.                 if ($this.val() == ”") {   
  21.                     $this.removeAttr(“style”).val($this[0].defaultValue);   
  22.                 }   
  23.             })//keywords   
  24.         });   
  25.     </script>   
  26. </head>   
  27. <body>   
  28. <div id=”content”>   
  29.     <form method=”POST” id=”user” action=”">   
  30.         User Name:<input type=”text” id=”keywords” class=”default” name=”keywords” value=”Enter your name”/><br/>   
  31.         PassWord:<input type=”text” id=”password” class=”default” name=”password” value=”Enter your password”/>   
  32.         <input type=”submit” name=”sub” value=”login”/>   
  33.     </form>   
  34. </div>   
  35. </body>   
  36. </html>    
<html>
<head>
    <title>用jquery实现输入框消失文字</title>
    <style type="text/css">
        .default {
            font-weight: bold;
            color: #787878;
        }
    </style>
    <script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#keywords").focus(function () {
                var $this = $(this);
                if ($this.val() == $this[0].defaultValue) {
                    $this.css("color","#0cf").val("");
                }
            }).blur(function () {
                var $this = $(this);
                if ($this.val() == "") {
                    $this.removeAttr("style").val($this[0].defaultValue);
                }
            })//keywords
        });
    </script>
</head>
<body>
<div id="content">
    <form method="POST" id="user" action="">
        User Name:<input type="text" id="keywords" name="keywords" value="Enter your name"/><br/>
        PassWord:<input type="text" id="password" name="password" value="Enter your password"/>
        <input type="submit" name="sub" value="login"/>
    </form>
</div>
</body>
</html>

  • 大小: 13.4 KB
  • 大小: 18.4 KB