自定义JQuery插件之 beforeFocus

时间：2022-12-23 07:06:30
<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

相关文章