利用jQuery中的val()属性完成默认登陆框

来源：互联网发布：为什么会有淘宝客编辑：程序博客网时间：2024/05/05 13:15

在网站中，我们经常遇到这样的登陆界面：当鼠标聚焦到邮箱地址文本框时，文本框中的“请输入邮箱地址”文本被清空，当鼠标移开时，文字自动还原的情况。如下图：

当鼠标移入输入框并点击时，文字会消失或变淡，下面我们就用jQuery完成如图的效果。

首先，我们写两个文本框的代码并设置默认值，代码：

完成后效果如下图：

现在就用jQuery中的val()属性实现效果：

$(this).val()得到文本框中的属性，如果他的值等于默认值，就将他设置为空，如果为空，就将他设置为默认值。

$("#address").focus(function(){
var hxy = $(this).val();
if(hxy == this.defaultValue){
$(this).val("");
}
});
$("#address").blur(function(){
var hxy = $(this).val();
if(hxy == ""){
$(this).val(this.defaultValue);
}
});

这样就做好了,效果：

鼠标离开且单击外面时，会恢复原状：

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默认登陆界面</title>
<script src="jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#address").focus(function(){
var hxy = $(this).val();
if(hxy == this.defaultValue){
$(this).val("");
}
});
$("#address").blur(function(){
var hxy = $(this).val();
if(hxy == ""){
$(this).val(this.defaultValue);
}
});
$("#password").focus(function(){
var hxy = $(this).val();
if(hxy == this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var hxy = $(this).val();
if( hxy == ""){
$(this).val(this.defaultValue);
}
});
});

</script>
</head>

<body>
<input type="text" id="address" value="请输入邮箱" style="color:#999" />
<br />
<input type="text" id="password" value="请输入密码" style="color:#999" />
<br />
<input type="button" value="登陆" />
</body>
</html>

0 1