JS模拟键盘事件 -- 原理及小例子

时间：2021-09-28 09:30:51

提问：

键盘默认事件，比如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&period;simulate&period;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&sol;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浏览器键盘事件控制&lpar;转自新浪微博&rpar;

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

  9. JS获取键盘事件

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

随机推荐

  1. Web服务器基础学习

    1)Socket通信相当于两个人通过电话联系,Http协议相当于电话联系时所使用的中文2)Http1.1前均为短连接,1.1版本为长连接,即服务器接收一次请求并发送响应后会等待一段时间看浏览器是否在这 ...

  2. oracle11g dataguard 完全手册

    一.前言: 网络上关于dataguard的配置文章很多,但是很多打着oracle11g的文章实际都是只能在9 10 上运行,比如FAL_CLIENT在11g中已经废弃,但是现在网络上的文章都是没有标注 ...

  3. VS Code First使用Mysql数据库详解

    最近电脑出毛病了,自己装显卡驱动给装死了开不了机,自己研究了两天也没解决,只有去修电脑的找专业人员,说起来惭愧,虽然自己是搞计算机的可电脑自己重装系统都还搞不定.重装系统又清理灰尘花了50大洋,现在用 ...

  4. javaweb之框架标签&lpar;day1 框架标签的使用&rpar;

    框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...

  5. Leetcode&colon; Lexicographical Numbers

    Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10,11,1 ...

  6. 20150916&lowbar;001 vba 基础

    一.什么是“宏”.“宏”有什么用 关于“宏”的详细定义,可以参考百度百科的解释(点击查看).我给它一个简单的或许不太严谨的定义: 宏的通俗定义:宏是被某些软件所能识别.理解并执行的特定代码/脚本. 宏 ...

  7. 关于python decode&lpar;&rpar;和 encode&lpar;&rpar;

    1.先收集一下这几天看到的关于decode()解码和encode()编码的用法 bytes和str是字节包和字符串,python3中会区分bytes和str,不会混用这两个.字符串可以编码成字节包,而 ...

  8. SpringMVC&lpar;转&rpar;

    http://www.cnblogs.com/liukemng/p/3725582.html

  9. 剑指offer（44）单词翻转序列

    题目描述 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...

  10. HBase过滤器的使用

    一.常用过滤器: 1.数据准备: Rowkey:001 Family:Quilfifier address value: 昆明市西山区 Rowkey:001 Family:Quilfifier age ...

相关文章