码迷,mamicode.com
首页 > Web开发 > 详细

input失去焦点和获得焦点jquery焦点事件

时间:2014-08-30 16:21:09      阅读:512      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   java   strong   ar   

input失去焦点和获得焦点jquery焦点事件插件,
鼠标在搜索框中点击的时候里面的文字就消失了

我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了

相关js代码:

bubuko.com,布布扣
 1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title>
5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(document).ready(function(){
8 //focusblur
9 jQuery.focusblur = function(focusid) {
10 var focusblurid = $(focusid);
11 var defval = focusblurid.val();
12 focusblurid.focus(function(){
13 var thisval = $(this).val();
14 if(thisval==defval){
15 $(this).val("");
16 }
17 });
18 focusblurid.blur(function(){
19 var thisval = $(this).val();
20 if(thisval==""){
21 $(this).val(defval);
22 }
23 });
24
25 };
26 /*下面是调用方法*/
27 $.focusblur("#searchkey");
28 });
29 </script>
30 </head>
31
32 <body>
33 <form action="" method="post">
34 <input name="" type="text" value="输入搜索关键词" id="searchkey"/>
35 <input name="" type="submit" id="searchbtn" value="搜索"/>
36 </form>
37 <p>input失去焦点和获得焦点jquery焦点事件插件,<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p>
38
39 </body>
40 </html>
bubuko.com,布布扣

input失去焦点和获得焦点jquery焦点事件

标签:style   blog   http   color   os   io   java   strong   ar   

原文地址:http://www.cnblogs.com/lschenblog/p/3946477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!