以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记。
对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。
focus():得到焦点时使用,和javascript中的onfocus使用方法相同。
如:
$("p").focus(); 或$("p").focus(fn)
如:blur():失去焦点时使用,和onblur一样。
$("p").blur(); 或$("p").blur(fn)
例
<script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p> </body>
鼠标在搜索框中点击的时候里面的文字就消失了。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input失去焦点和获得焦点jquery焦点事件插件</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //focusblur jQuery.focusblur = function(focusid) { var focusblurid = $(focusid); var defval = focusblurid.val(); focusblurid.focus(function(){ var thisval = $(this).val(); if(thisval==defval){ $(this).val(""); } }); focusblurid.blur(function(){ var thisval = $(this).val(); if(thisval==""){ $(this).val(defval); } }); }; /*下面是调用方法*/ $.focusblur("#searchkey"); }); </script> </head> <body> <form action="" method="post"> <input name="" type="text" value="输入搜索关键词" id="searchkey"/> <input name="" type="submit" id="searchbtn" value="搜索"/> </form> <p>input失去焦点和获得焦点jquery焦点事件插件,<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p> </body> </html>
一个根据ajax值来判断是显示或隐藏p
<tr> <td width='70' height='30' align='right'><span class="red">*</span> 手机:</td> <td width='198' align='center'><input name="tgmo" type="text" class="tcinp" id="tgmo" size="15"/></td> <td><span class="gray">用房乐网会员登录名可获取5房乐币 </span></td> </tr> js $(function(){ $('#tgmo').blur(function(){ $.post('post.php?action=check',{'tgmo':$('tgmo').val()},function(data) { if( data==0 ) { $('#sy_a').show(); $('#autoregister').val(1); } else { $('#sy_a').hide(); $('#autoregister').val(0); } }); }) });
以上是jquery中blur()失去焦点与focus() 获取焦点事件 的详细内容。更多信息请关注PHP中文网其他相关文章!