自定义JQuery插件之 beforeFocus

<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

posted on 2014-02-11 10:54 lingaizheng 阅读(531) 评论(0) 编辑收藏举报