JQuery实现搜索框功能 - 好文

在用html代码用placeholder="text"就能实现

text:表示在文本框要显示的内容

html代码：
<body> <form action="" method="post"> <input type="text"
placeholder="请输入" id="key" /> <input type="submit" name="submit"
value="提交" /> </form> </body>
jQuery代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/> <title></title> <script
src="Scripts/jquery-1.11.3.js"></script> <script type="text/javascript">
$(function () { //搜索框 $('#key').focus(function() { if($(this).val() ==
'请输入关键词！') { $(this).val(""); } }); $('#key').blur(function(){ if($(this).val()
== "") { $(this).val('请输入关键词！'); } }); }); </script> <meta charset="utf-8" />
</head> <body>  <form action="" method="post"> <input
type="text" value="请输入关键词！" id="key" /> <input type="submit" name="submit"
value="提交" /> </form> </body> </html>
blur([[data],fn])事件

概述

当元素失去焦点时触发 blur 事件。

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur
事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

focus([[data],fn])

概述

当元素获得焦点时，触发 focus 事件。

可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

热门工具换一换