获取/失去焦点效果练习

最新推荐文章于 2021-08-03 10:24:30 发布

泪痕9688

最新推荐文章于 2021-08-03 10:24:30 发布

阅读量206

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/leihen9688/article/details/43965913

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的HTML表单展示了如何使用JavaScript（jQuery库）实现在输入框聚焦时清除默认提示文本，以及输入框失焦时若未输入内容则恢复提示文本的功能。同时，还演示了在邮箱地址输入框聚焦后显示密码输入框，并在密码输入框失焦且无输入时恢复显示文本输入框的过程。

摘要由CSDN通过智能技术生成

<!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>
<style type="text/css">
#txt1,#txt2{ color:#CCC; border:1px solid #666;}
#pswd{ display:none;border:1px solid #666;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>

<body>
<form id="myform" action="#">
地址：<input type="text" id="txt1" value="请输入邮箱地址"/><br /><br />
密码：<input type="text" id="txt2" value="请输入邮箱密码"/>
<input type="password" id="pswd" /><br /><br />
<input type="button" id="btn"value="登陆" />
</form>
</body>
</html>
<script type="text/javascript">
$(function(){
//邮箱地址输入框获取焦点
$('#txt1').focus(function(){
var txt1_value=$('#txt1').val();
if(txt1_value=="请输入邮箱地址"){
$(this).val('');
}
})

//邮箱地址输入框失去焦点
$('#txt1').blur(function(){
var txt1_value=$('#txt1').val();
if(txt1_value=="")
$(this).val('请输入邮箱地址');{
}
})

var $txt2_obj=$('#txt2');//获取id为txt2的jquery对象
var $pswd_obj=$('#pswd');//获取id为txt2的jquery对象
$txt2_obj.focus(function(){
$pswd_obj.show().focus();//使密码输入框获取焦点
$txt2_obj.hide();//隐藏文本输入框

})
$pswd_obj.blur(function(){
if($pswd_obj.val()==''){//密码输入框失去焦点后，若输入框中没有输入字符时，则显现文本输入框
$txt2_obj.show();
$pswd_obj.hide();
}

})



})
</script>