<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

自定义JQuery插件之 beforeFocus的更多相关文章

  1. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  2. 使用自定义 jQuery 插件的一个选项卡Demo

    前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...

  3. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  4. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  5. 1.ssm web项目中的遇到的坑--自定义JQuery插件（slide menu）

    自定义的JQuery插件写的回调函数不执行: 写好了回调函数,将函数打印出来是原形,就是不执行 function () { console.log("---onClickItem---&qu ...

  6. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  7. 自定义jquery插件

    参考:http://blog.csdn.net/bao19901210/article/details/21540137/ 自己看代码理解: <!DOCTYPE html> <htm ...

  8. jQuery插件编写规范

    第一种方法: 在很多基于jQuery或基于Zepto的插件中,在立即函数执行前面会加上";"这个符号. 这是为了防止前面的其他插件没有正常关闭. 在立即执行函数执行时,会一般会传入 ...

  9. （翻译）编写属于你的jQuery插件

    Writing Your Own jQuery Plugins 原文地址:http://blog.teamtreehouse.com/writing-your-own-jquery-plugins j ...

随机推荐

  1. ZOJ-1508Intervals(差分约束)

    题意: 有一个序列,题目用n个整数组合 [ai,bi,ci]来描述它,[ai,bi,ci]表示在该序列中处于[ai,bi]这个区间的整数至少有ci个.如果存在这样的序列,请求出满足题目要求的最短的序列 ...

  2. 解决weblogic Managed Server启动非常慢的情况

    jdk版本:1.7.0_79 查看控制台日志停留在如下地方: . . JAVA Memory arguments: -Xms2048m -Xmx4096m -XX:MaxPermSize=512m . ...

  3. redis数据过期策略【转】

    key的过期时间通常,Redis key被创建时不会自动关联过期时间,key将长久存在,除非通过DEL等命令显示的删除.EXPIRE命令簇可以为指定的key关联一个过期时间,代价是一点额外的内存开销. ...

  4. bluetooth记录

    1. 网址 Client Characteristic Configuration https://developer.bluetooth.org/gatt/descriptors/Pages/Des ...

  5. [FreeProxy]FreeProxy代理服务器端软件介绍 之 sock 5

    首先在FreeProxy上创建一个sock5 service 然后在Client 设置使用sock5

  6. HDOJ 1215 七夕节

    Problem Description 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们的另一半是谁吗?那就按照告示上的方法去找吧!" ...

  7. 关于 NoSQL 数据库你应该了解的 10 件事

    四分之一个世纪以来,关系型数据库(RDBMS)一直是主流数据库模型.但是现在非关系型数据库,“云”或者“NoSQL”数据库,正在作为一种替代数据库模型获得越来越多的占有率.本文中我们将关注非关系型 N ...

  8. linux —— 学习笔记（汇总）

    笔记目录:一.系统知识 和 基本概念                    二.常用操作                   三.系统管理(内存.设备.服务等管理)                   ...

  9. IOS UITextField 设置光标位置

    textField.leftView = [[[UIView alloc] initWithFrame:CGRectMake(, , , )] autorelease]; textField.left ...

  10. Windows下Android Studio长时间停留在Building "Project Name" Gradle project info画面的解决方法

    问题描述: 创建好一个Android项目后,Android Studio长时间停留在Building [Project Name] Gradle project info画面不动. 原因: 此时And ...