提问：

键盘默认事件，比如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. 通过Shell和Redis来实现集群业务中日志的实时收集分析

    http://www.linuxidc.com/Linux/2013-05/83935.htm

  2. Smarty include使用

    {include} {include}用于载入其他模板到当前模板中. 在包含模板中可用的变量,载入后在当前模板仍然可用. {include}必须设置file 属性,设置载入的文件资源路径. 设置了可选 ...

  3. IBM Cognos 10 启动报错

    报错信息: 15:35:02, 'LogService', 'StartService', 'Success'. 15:35:03, CAF input validation enabled. 15: ...

  4. CH Round #54 - Streaming #5 (NOIP模拟赛Day1)

    A.珠 题目:http://ch.ezoj.tk/contest/CH%20Round%20%2354%20-%20Streaming%20%235%20(NOIP模拟赛Day1)/珠 题解:sb题, ...

  5. EF 5.0 帮助类 增删改查

    原文地址:http://www.cnblogs.com/luomingui/p/3362813.html EF 5.0 帮助类 加入命名空间: using System; using System.D ...

  6. 数据加密算法---base64

    简介 base64是把8位字符打散,转换成不被人直接识别的形式,严格来说它并不是加密算法,只能算做一种编码方式 原理 首先准备64个字符数组做为“数组库” ['A', 'B', 'C', ... 'a ...

  7. 电脑上已经安装mysql之后安装wamp，wamp中的mysql无法启动的解决办法

    Wampserver安装完成后无法启动MySQL这有可能是你之前安装过MysqL,因为wampserver内置MySQL.解决的方法就是配置环境变量. 找到我的电脑或计算机右键,打开属性,然后打开高级 ...

  8. servletContext百科

    servletContext 编辑   servletContext接口是Servlet中最大的一个接口,呈现了web应用的Servlet视图.ServletContext实例是通过 getServl ...

  9. Redis源代码分析-内存数据结构intset

    这次研究了一下intset.研究的过程中,一度看不下过去,可是还是咬牙挺过来了.看懂了也就是那么回事.静下心来,切莫浮躁 Redis为了追求高效,在存储下做了非常多的优化,像intset就是作者为了节 ...

  10. Spring注解的使用和区别：@Component、@Service、@Repository、@Controller

    Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...