jQuery学习16---搜索文本框效果

最新推荐文章于 2022-11-16 14:36:25 发布

onyas

最新推荐文章于 2022-11-16 14:36:25 发布

阅读量837

点赞数

分类专栏： jQuery 文章标签：搜索文本框效果

本文链接：https://blog.csdn.net/zheng0518/article/details/9202627

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
			.black
			{
				color:Black;
			}
			.gray
			{
				color:Gray;
			}
		</style>
		<script type="text/javascript">
			$(function()
			{
				$("#textSearch").focus(function()
				{
					//先判断当前输入框中的文字
					if($(this).val() =="请输入搜索关键字")
					{
						$(this).val("").attr("class","black");
					}
				}).blur(function()
				{
					if($(this).val().length==0 || $(this).val() =="请输入搜索关键字")
					{
						$(this).val("请输入搜索关键字").attr("class","gray");
					}
				});
			});
		</script>
	</head>
	<body>
		<input id="textSearch" type="type" value="请输入搜索关键字" class="gray" />
		<input id="btn" type="button" value="搜索">
	</body>
</html>