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>
