jQuery第二弹

最新推荐文章于 2024-10-10 11:15:29 发布

TalentO_o

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量93

点赞数

分类专栏：前端文章标签： jquery html javascript css

本文链接：https://blog.csdn.net/weixin_42652869/article/details/113385915

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript和CSS创建一个具有特定搜索框特效的网页元素。当搜索框获得焦点时，如果初始值为'电风扇'，则会清空输入；失去焦点且值为空时，将恢复显示'电风扇'。此特效增强了用户体验。

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

<head lang="en">
	<meta charset="UTF-8">
	<title>搜索框特效</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			font-size: 12px;
		}
		
		input {
			float: left;
		}
		
		#searchtxt {
			width: 222px;
			height: 38px;
			line-height: 38px;
			padding-left: 30px;
			border: none;
			background: url(images/bg.jpg) no-repeat;
		}
		
		.search_btn {
			width: 90px;
			height: 38px;
			line-height: 38px;
			border: none;
			background: url(images/btn.jpg) no-repeat;
			margin-left: -4px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			//获取搜索框，绑定获取焦点事件
			$("#searchtxt").focus(function() { //获取焦点事件
				//1.获取搜索框的值
				var txt_value = $(this).val();
				//2.如果搜索的值等于电风扇，清空value属性值
				if(txt_value == "电风扇") {
					$(this).val("");
				}
			});
			//获取搜索框，绑定失去焦点事件
			$("#searchtxt").blur(function() {
				//1.获取搜索框的值
				var txt_value = $(this).val();
				//2.如果搜索框的值为空，显示电风扇
				if(txt_value == "") {
					$(this).val("电风扇");
				}
			})
		})
	</script>
</head>
<body>
	<input name="" type="text" class="search_txt" value="电风扇" id="searchtxt" />
	<input type="button" class="search_btn" />
</body>