您的位置：首页 > Web前端 > JQuery

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

2014-03-28 14:29 465 查看

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

页面效果：

<%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>11</title>
<style type="text/css">
body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.js">
</script>
<script language="javascript">
$(document).ready(function()
{
//**********************左右移动*******
$("#bt1").click(
function()
{
$("#bt1").focus(function(){
//进入焦点时触发
$curVal=$(this).val();
if($curVal==this.defaultValue)
{
$(this).val("");
}
});
});
//失去焦点时触发
$("#bt1").blur(function(){
$curVal=$(this).val();
if($curVal=="")
{
alert(this.defaultValue);
$(this).val(this.defaultValue);
}
});

});

</script>
</head>
<body>
用户名<input type="text" id="bt1" value="用户邮箱/手机号/邮箱"></input>
密码<input type="password" id="bt2" value="密码"></input>
<input type="button" id="bt3" value="登陆"></input>
</body>
</html>

my Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航