zoukankan      html  css  js  c++  java
  • jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点

    功能:进入页面,输入框用户名中默认填写的有用户名/手机/邮箱,当鼠标移动到上面时,默认值消失。鼠标移开时,如果没有填值,则继续显示用户名/手机/邮箱

    页面效果:

             

    代码如下:

     1 <%@ page language="java" import="java.util.*"
     2  pageEncoding="utf-8"%>
     3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     4 <html>
     5   <head>
     6   <title>11</title>    
     7   <style type="text/css">
     8   body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
     9   </style>
    10   <script type="text/javascript" src="../js/jquery-1.11.0.js">
    11   </script>
    12   <script language="javascript">
    13    $(document).ready(function()
    14   {      
    15       //**********************左右移动*******
    16      $("#bt1").click(
    17      function()
    18      {        
    19          $("#bt1").focus(function(){
    20           //进入焦点时触发
    21           $curVal=$(this).val();
    22           if($curVal==this.defaultValue)
    23           {
    24               $(this).val("");
    25           }          
    26          });
    27       }); 
    28       //失去焦点时触发
    29       $("#bt1").blur(function(){
    30        $curVal=$(this).val();
    31       if($curVal=="")
    32       {
    33         alert(this.defaultValue);
    34           $(this).val(this.defaultValue);          
    35       }
    36       });
    37      
    38    });
    39   
    40   </script>
    41   </head> 
    42   <body>
    43     用户名<input type="text" id="bt1" value="用户邮箱/手机号/邮箱"></input>
    44     密码<input type="password" id="bt2" value="密码"></input>
    45     <input type="button" id="bt3" value="登陆"></input>
    46   </body>
    47 </html>
    my Code
  • 相关阅读:
    关于float与double
    【编程实践】母牛生小牛
    wlan的QOS配置
    C语言itoa函数和atoi 函数
    类似于QQ的简单的聊天代码
    多线程吃饺子练习
    线程练习
    接口练习
    电视练习
    5.22
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3630614.html
Copyright © 2011-2022 走看看