用jQuery实现搜索框效果

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

苳眠

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

阅读量311

点赞数

分类专栏： JavaScript 文章标签： jquery JavaScript 搜索框 ViewUI

本文链接：https://blog.csdn.net/jackwang2013/article/details/84442267

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Last modified：2013-06-13 12:56:21
**********************************
搜索框效果：
搜搜：<input type="text" id="tid"/><input type="button" value="搜索" onClick="todo();"/>
<script type="text/javascript">
	$(function(){
		$("#tid").val("请输入关键词").addClass("wait")
		.blur(function(){
			if($(this).val()==""){
				$("#tid").val("请输入关键词").addClass("wait");
			}
		}).focus(function(){
				if($(this).val()=="请输入关键词"){
				$("#tid").val("").removeClass("wait");
			}
		});
	});
	function todo(){
		var word = $("#tid").val();
		if(word == "请输入关键词" && $("#tid").hasClass("wait")){
			alert("请输入关键词在搜索");
			return;
			}
		window.location = "http://www.baidu.com/s?word="+word;
		}
</script>