提问：

键盘默认事件，比如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. iOS开发之UIWebView自动滑动到顶部-备

    但可以通过subview来操作. 通常用UIWebView加载网页,有时候需要点击一个按钮,或者页面的某个部位,使页面自动滚动到顶部,但是UIWebView不像UIScrollView那么方便.   ...

  2. Android 自定义控件 EditText输入框两边加减按钮Button

    自己封装的一个控件:EditText两边放加减按钮Button来控制输入框的数值 Demo 下载地址: 第一版:http://download.csdn.net/detail/zjjne/674086 ...

  3. 64位linux中使用inet_ntoa报错处理

    最近一直使用linux mint 15,我用的是64位操作系统,在进行网络编程的时候,发现一个问题,请看源码: /*get_ip_by_name.c*/ #include <stdio.h> ...

  4. COJ 0999 WZJ的数据结构（负一）

    WZJ的数据结构(负一) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 输入N个模板串Pi和文本串T,输出每个模板串Pi在T ...

  5. BZOJ3389: [Usaco2004 Dec]Cleaning Shifts安排值班

    3389: [Usaco2004 Dec]Cleaning Shifts安排值班 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 45  Solved:  ...

  6. 计蒜客 444 / xtuoj 1024 京东的物流路径（并查集+离线lca）或者 （点分治）

    题意:一颗树,定义一条路径的权值等于路径的边权之和,需要求这颗树所有路径中权值的最大值 思路: 考虑到路径权值与点权的最值有关,而最值的问题通常可以通过排序就行处理,于是想到先把点权排序. 容易看出如 ...

  7. sicily 无路可逃？(图的DFS)

    题意:在矩阵数组中搜索两点是否可达 解法:DFS #include<iostream> #include<memory.h> using namespace std; stru ...

  8. Java框架学习之Hibernate入门

    Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. Hibernate可以应用在任何使用JDB ...

  9. hadoop 常用命令

    hdfs dfs -mkdir -p /usr/input/hot hdfs dfs -ls / hdfs dfs -ls /usr/input hdfd dfs -cat /usr/ouput/ho ...

  10. Engineer Economic

    1.选择题 10.下列哪项不属于总成本费用() A.生产成本    B.机会成本    C.管理费用    D.财务费用 第1章 11.下列哪项关于自有资金的表述是错误的(D) A.自有资金包括资本金 ...