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
  • 相关阅读:
    为什么建立视图
    Oracle constraints type 约束类型
    python 环境
    查看oracle 数据库的编码格式
    trigger
    闪回操作 flashback
    row_number()over(partiton by order by ) rank() over(partition by order by )
    lag() 偏移
    date
    配置ES中IK分词器远程词库
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3630614.html
Copyright © 2011-2022 走看看