注册表单文本框默认提示内容，选中提示消失

最新推荐文章于 2024-06-19 16:38:17 发布

大眼萌

最新推荐文章于 2024-06-19 16:38:17 发布

阅读量3.5k

点赞数 1

分类专栏： WEB前端文章标签：注册登录用户提示用户体验

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当我们在做一个网站的时候，经常会做登录注册功能，为了提高用户体验，我们经常会在注册框里给用户一些简单的提示，例如下图：

但是，当我们要往文本框里输入信息的时候，文本框的内容就要消失：

实现方法如下：

<!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>val()方法</title>
<style>
.register{ width:400px; height:300px; text-align:left;border:3px dashed #F00; padding:50px; color:#666; position:absolute; background-color:#fafafa; top:50%; left:50%; margin-left:-200px; margin-top:-150px;}
.text{ height:35px; line-height:35px; border:1px dashed #F00; width:300px;color:#666; }
.button{ background-color:#F00; color:#FFF; width:100px; height:30px; line-height:30px; border:none;}

</style>
<script src="JS/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$("#name").focus(function(){
var name_value=$(this).val();
if(name_value=="请输入您的姓名"){
$(this).val("");
}
})//当获取鼠标焦点时，如果姓名地址栏的内容为“请输入您的姓名”，则将地址栏的内容清空
$("#name").blur(function(){
var name_value=$(this).val();
if(name_value==""){
$(this).val("请输入您的姓名");
}
})//当文本框失去焦点时，如果姓名地址栏的内容为空，则将地址栏的内容为之前提示的内容

$("#email").focus(function(){
var email_value=$(this).val();
if(email_value=="请输入您的邮箱"){
$(this).val("");
}
})//当获取鼠标焦点时，如果邮件地址栏的内容为"请输入您的姓名"，则将地址栏的内容清空
$("#email").blur(function(){
var email_value=$(this).val();
if(email_value==""){
$(this).val("请输入您的邮箱");
}
})//当文本框失去焦点时，如果邮件地址栏的内容为空，则将地址栏的内容为之前提示的内容

$("#emailpassworda").focus(function(){
var emailpassworda_value=$(this).val();
if(emailpassworda_value=="请输入您的密码"){
$(this).val("");
}
})//当获取鼠标焦点时，如果密码地址栏的内容为"请输入您的姓名"，则将地址栏的内容清空
$("#emailpassworda").blur(function(){
var emailpassworda_value=$(this).val();
if(emailpassworda_value==""){
$(this).val("请输入您的密码");
}
})//当密码框失去焦点时，如果密码地址栏的内容为空，则将地址栏的内容为之前提示的内容
$("#emailpasswordb").focus(function(){
var emailpasswordb_value=$(this).val();
if(emailpasswordb_value=="请再次输入您的密码"){
$(this).val("");
}
})//当获取鼠标焦点时，如果密码地址栏的内容为"请输入您的姓名"，则将地址栏的内容清空
$("#emailpasswordb").blur(function(){
var emailpasswordb_value=$(this).val();
if(emailpasswordb_value==""){
$(this).val("请再次输入您的密码");
}
})//当密码框失去焦点时，如果密码地址栏的内容为空，则将地址栏的内容为之前提示的内容

});
</script>
</head>
<body>
<div class="register">
<form>
<strong>姓名</strong>   ：<input class="text" id="name" type="text" value="请输入您的姓名" /><br /><br />
<strong>性别</strong>   ：<input type="checkbox"> 男 <input type="checkbox" /> 女<br /><br />
<strong>邮箱</strong>   ：<input class="text" id="email" type="text" value="请输入您的邮箱" /><br /><br />
<strong>邮箱密码：</strong><input class="text" type="password" id="emailpassworda" value="请输入您的密码" /><br /><br />
<strong>再输一次：</strong><input class="text" type="password" id="emailpasswordb" value="请再次输入您的密码" /><br /><br />
<pre> <input class="button" type="button" value="立即提交"/> </pre>
</form>
</div>
</body>

</html>

其中：
1- var()用来设置和获取的值
2-focus()用来处理获取焦点事件
3-blur()处理失去焦点的事件