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里还有很多东西要去挖掘,前端大路漫漫。

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM