zoukankan      html  css  js  c++  java
  • JS模拟键盘事件 -- 原理及小例子

    提问:

    键盘默认事件,比如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里还有很多东西要去挖掘,前端大路漫漫。

     
  • 相关阅读:
    基本指令6---GRANT
    基本指令4---ALTER
    基本指令3--UPDATE/DELETE/DROP
    基本指令2---CREATE/INSERT INTO
    基本指令1
    jmeter-跨线程组传值
    【数学】斯特林子集数 | 斯特林轮换数 | 欧拉数
    【图论】拓扑排序
    【数学】多项式(原理)
    【数学】普通型生成函数
  • 原文地址:https://www.cnblogs.com/ccforeverd/p/3863095.html
Copyright © 2011-2022 走看看