Jquery系列-Jquery搜索框

最新推荐文章于 2025-07-13 16:11:27 发布

jackson_fighting

最新推荐文章于 2025-07-13 16:11:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/SDN_SUPERUSER/article/details/13437015

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用jQuery简化网页输入框用户体验的方法。通过在输入框中预先填充提示信息并根据用户的操作智能调整，提高了网站的交互性和可用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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-1.10.2.js" type="text/javascript"></script>
<style type="text/css">
	.waiting{color:gray};
</style>
<script type="text/javascript">
	$(function(){
		$('#txt_input').val('请输入关键字').addClass("waiting")
		.blur(function(){
			if($(this).val() ==''){
				$('#txt_input').val('请输入关键字')
			}
		})
		.focus(function(){
			if($(this).val() =='请输入关键字'){
				$('#txt_input').val('');
				$('#txt_input').removeClass('waiting');
			}
		});
	});

	
</script>	

</head>
<body>



<input type="text" value='' id="txt_input"/>
</body>
</html>