JQuery控制搜栏的焦点

最新推荐文章于 2025-12-08 09:18:56 发布

转载最新推荐文章于 2025-12-08 09:18:56 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ponyblog/archive/2013/03/06/2945897.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JQuery控制输入框焦点的小技巧，通过自定义函数实现输入框获得焦点时清空默认提示文字，失去焦点时恢复提示文字，提升了用户体验。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="scripts/jquery-1.9.1.min.js"></script>
 6 <title>JQuery小技巧--控制搜栏的焦点</title>
 7 <script>
 8 $(document).ready(function(e) {
 9     $("#input_search").fillText();
10 });
11 </script>
12 <script>
13     $.fn.fillText=function(){
14         //取得原有的字符串
15         var _text = $(this).val();
16         $(this).focus(function(){//获取焦点事件
17             $(this).val("");
18         }).blur(function(){//失去焦点事件
19             $(this).val(_text);
20         });
21     }
22 </script>
23 </head>
24 
25 <body>
26 <input id="input_search" value="kdjkfjkdjkfjk" />
27 </body>
28 </html>