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

转载于:https://www.cnblogs.com/luckyflower/p/3630614.html

jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点相关推荐

小程序 onReachBottom 事件快速滑动时不触发的bug
一般在列表页面会先加载一定数量的数据触发上拉加载这个动作的时候再陆续加载数据假如上拉一次加载10条数据在小程序中你快速滑动页面触发加载这个事件的话你会发现小程序卡着不动了刚开始以为数据加 ...
计算机小三层,电脑设置三层密码具体方法
出于安全考虑,有时候我们有必要给自己的电脑设置三层密码.下面由学习啦小编为你整理了电脑设置三层密码的相关方法,希望对你有帮助! 电脑设置三层密码方法如下 1.系统用户密码设置先点击左下角的开始,点击 ...
jQuery学习小征途
jQuery学习小征途 1.1 初识jQuery 1.2 jQuery选择器 1.2.1 基本选择器 1.2.2 特殊选择器 1.3 jQuery 筛选器 1.3.1 first() 1.3.2 la ...
js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷 ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
jQuery和AngularJS的区别小分析
最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...
【JQuery】JQuery学习笔记
(function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
jQuery学习笔记系列（二）
day02 - jQuery 学习目标: 能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...

jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点

jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点相关推荐

最新文章

热门文章