提问：

键盘默认事件，比如tab切换，alt+f4关闭，ctrl+t新建等，如果不想通过键盘而是一些按钮点击来触发这些功能，该咋办呢？

例子：

先以tab为例上一个小例子：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>触发键盘默认事件</title>

    </head>

    <body>

        <div>

            <input type="button" tabindex="-1" value="点点点点点" id="btn">

            <input type="text" placeholder="1">

            <input type="text" placeholder="2">

            <input type="text" placeholder="3">

            <input type="text" placeholder="4">

            <input type="text" placeholder="5">

            <input type="text" placeholder="6">

        </div>

        <script>

            // 当前获取焦点的元素

            var nowEle=document;

            // 需要焦点切换的元素

            var inputs=[].slice.call(document.querySelectorAll("[type=text]"));

            // 只添加获取焦点事件

            // 放弃失去焦点事件 -- 需要判断失去后焦点被谁获得,太麻烦

            inputs.forEach(function(el,i){

                el.onfocus=function(){

                    nowEle=this;

                };

                /*el.onblur=function(){

                    setTimeout(function() {

                        nowEle=document;

                    }, 0);

                };*/

            });

            //  !!! 关键部分,事件模拟 !!!

            btn.onclick=function(ev){

                // console.log(nowEle);

                var e=document.createEvent("KeyboardEvents");

                e.initKeyboardEvent("keydown",true,true,window,"U+0009"); // tab

                if(nowEle==inputs[inputs.length-1])nowEle=document;

                nowEle.focus && nowEle.focus();

                nowEle.dispatchEvent(e);

                // console.log(e);

            };

            /*document.onkeydown=function(ev){

                // console.log(ev.keyCode,ev.which,ev);

            };*/

            // input获取焦点:tab切换和鼠标点击

            // 这里处理鼠标点击获取焦点

            document.addEventListener("click",function(ev){

                for (var i = 0; i < inputs.length; i++) {

                    if(inputs[i]==ev.target || btn==ev.target)return;

                };

                nowEle=document;

            },false);

        </script>

    </body>

</html>

介绍：

实际效果：模拟tab事件在指定范围内移动焦点，点击按钮，使焦点在6个input标签里切换。

主逻辑为：通过键盘事件和点击事件（焦点的两种获取方式）找到当前获取焦点的元素，通过按钮点击来模拟键盘的tab按钮。

技术难点：键盘事件模拟，以及找到正确的事件触发者。

难点：

模拟键盘事件：

var e=document.createEvent("KeyboardEvents");

e.initKeyboardEvent("keydown",true,true,window,"U+0009"); // tab

if(nowEle==inputs[inputs.length-1])nowEle=document;

nowEle.focus && nowEle.focus();

nowEle.dispatchEvent(e);

1.document.createEvent

DOM3 新方法，创建事件，参考资料：浅谈Javascript事件模拟。

2.e.initKeyboardEvent

设置事件参数，参考资料：WebKit 内核浏览器 initKeyboardEvent 函数原型。

3.nowEle.dispatchEvent(e)

指定事件对象。

收获:

源自一个讨论群里的小问题，有点感兴趣就查了查，写了个小demo，看来JavaScript里还有很多东西要去挖掘，前端大路漫漫。

 

JS模拟键盘事件 -- 原理及小例子的更多相关文章

  1. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  2. js模拟键盘事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  3. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  4. selenium 模拟键盘事件 复制粘贴、右键、回车等

    #coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...

  5. js/jquery键盘事件及keycode大全

    js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...

  6. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  7. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  8. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

随机推荐

  1. C++构造函数 & 拷贝构造函数 & 派生类的构造函数 & 虚继承的构造函数

    构造函数 ,是一种特殊的方法 .主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中 .特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数 ...

  2. 一句话输出NGINX日志访问IP前十位排行

    AWK的数组字段自增加,然后取值的方法,要记得哟. 还有,SORT指定列排行,也常用的.

  3. Linq中join & group join & left join 的用法

    Linq中join & group join & left join 的用法 2013-01-30 11:12 12154人阅读 评论(0) 收藏 举报  分类: C#(14)  文章 ...

  4. pydev package包中__init__.py作用

    Eclipse用pydev,新建一个pydev package时,总会自动地生成一个空的__init__.py文件. 原来在python模块的每一个包中,都有一个__init__.py文件(这个文件定 ...

  5. 深入 JavaScript(6) - 一静一动

    这里是JavaScript核心的内容了. 挺多的JavaScript测试题也是围绕这个出的. 这里的一静一动指的是: 静, 词法作用域 - Lexical scoping 动, 动态绑定this的值 ...

  6. 黑马程序员_JavaIO流（四）

    File概述 File类 用来将文件或者文件夹封装成对象. 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递给流的构造函数. 了解File类中的常用方法. 字段:static St ...

  7. cf500B New Year Permutation

    B. New Year Permutation time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  8. 查看db2表空间使用率

    select char(TABLESPACE_NAME,16) tablespace_name,decimal(PAGE_SIZE/1024,4,2) page,used_pages*100/usab ...

  9. 170109、JSONP是什么

    一.JSONP的诞生 首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, <script>标签的src属性是可以跨域的 把跨域服务器写成 调用本地的函数 ,回调数据回来不 ...

  10. [深入React] 9.小技巧

    如果组件没有state那就可以精简成一个render function var Item = function(props){ return _('div',null,'名称:'+props.name ...