提问：

键盘默认事件，比如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. VMProtect修复导入表的插件

    壳版本:VMProtect.Ultimate.2.12.3 样本:TKLobby.exe 目的:IAT修复 作者:MrWrong 标题:VMProtect修复导入表的插件 只是感兴趣,没有其他目的.失 ...

  2. new Date参数问题

    new Date支持的参数: MDN:   new Date();   new Date(value);   new Date(dateString);   new Date(year, month, ...

  3. unity中的[xxxxxx]特性(Attributes)

    [SerializeField] 在Inspector版面中显示非public属性,并且序列化:若写在public前面,等于没写. [Obsolete("调用提示信息")] [No ...

  4. Entity Framewor 学习笔记 (碎碎的东西)

    Proxy 类代理类是为了让EF实现lazy load才需要的 public class BloggingContext : DbContext {     public BloggingContex ...

  5. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  6. Mediator pattern（c++ 实现）

    概述: 假设我们开发一个图片处理软件,里面肯定包括很多相关功能,比如说剪切,旋转,滤镜,美化等等,而我们这些功能所要处理的对象是固定的,就是我们所显示的那张图片.但是我们不能把所有的功能罗列到一个ta ...

  7. PowerShell 转码函数 Default->UTF8

    $chs='你好' function converToUft8($str){ $bs=[System.Text.Encoding]::Default.GetBytes($str); $u8Char=[ ...

  8. android中操作SQLite注意事项

    调用rawQuery()后,需要调用Cursor的movToFirst(); public Cursor query(String sql, String[] args){ SQLiteDatabas ...

  9. [LeetCode] 57. Insert Interval 解决思路

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  10. HDOJ 1248

    完全背包. 模版. 物品的价值等价于体积. #include <stdio.h> #include <string.h> using namespace std; int ma ...