<html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $.fn.extend({ ///聚焦前触发该事件 具有以下特点 //1.与focus/OnFocus不同的是 该事件只触发一次不一直触发 //2.与click/OnClick不同的是 该事件可以捕捉Tab键造成的焦点转移 beforeFocus: function (f) { var ey = $(this); var _eyisloop = false; var _eybr = function () { if (_eyisloop == undefined || _eyisloop) {//默认循环 ey.beforeFocus(f); //重新调用 } ey.unbind("blur", _eybr); //解绑失去焦点函数 避免重复绑定 }; //失去焦点函数 var _eyfs = function () { _eyisloop = f(); //触发焦点方法 ey.unbind('focus', _eyfs); //解绑获得焦点函数 ey.bind('blur', _eybr); //绑定失去焦点函数 }; //获得焦点函数 ey.bind('focus', _eyfs); //绑定获得焦点函数 } }); //JQuery扩展 $('#txt_test').beforeFocus(function () { alert('文本框获得了焦点'); //写你的焦点方法 //return true;//此处返回值 标示是否在失去焦点后重新绑定 不返回默认true }); //调用 }); </script> </head> <body> <input type="text" id="txt_test" /> </body> </html>
意图：解决focus重复调用问题和使用click不能捕捉Tab键的焦点转移问题
作者：pcazheng