jQuery学习笔记- focus和blur事件妙用
2014-03-15 19:42
941 查看
一、定义和用法
focus事件
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
blur事件
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
二、示例代码
focus事件
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
blur事件
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
二、示例代码
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); $("#btn1").click(function(){ $("input").focus(); }); $("#btn2").click(function(){ $("input").blur(); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p> <p><button id="btn1">触发输入域的 focus 事件</button></p> <p><button id="btn2">触发输入域的 blur 事件</button></p> </body> </html>
相关文章推荐
- jQuery-focus()和blur()方法-文本框单击字体消失及移开灰色显示 学习笔记七
- jQuery事件(ready/bind/hover/toggle/unbind/one/trigger/focus/blur/change/live)
- jQuery学习笔记--jQuery的事件
- jquery学习笔记 之二 事件与效果
- jQuery学习笔记:事件绑定
- 锋利的jQuery学习笔记之事件和动画
- JQuery中focus()与blur()焦点事件
- JQuery学习笔记-JQuery中的事件
- jquery focus,blur事件
- jQuery学习笔记之DOM操作、事件绑定(2)
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件
- jQuery 学习笔记 事件系列
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jquery失去焦点与获取焦点事件blur() focus()
- jQuery学习笔记之DOM操作、事件绑定(2)
- jQuery 学习笔记 事件委派
- 【五】jquery之事件(focus事件与blur事件)[提示语的出现及消失时机]
- jQuery 学习笔记(三)——事件与应用
- jQuery事件对象的属性之学习笔记
- jquery 深入学习笔记之中的一个 (事件绑定)