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

最新推荐文章于 2024-05-20 15:17:08 发布

weixin_30823683

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量462

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/ccforeverd/p/3863095.html

版权

提问：

键盘默认事件，比如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.οnblur=function(){
                    setTimeout(function() {
                        nowEle=document;
                    }, 0);
                };*/
            });

            //  !!! 关键部分,事件模拟 !!!
            btn.οnclick=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.οnkeydοwn=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里还有很多东西要去挖掘，前端大路漫漫。

转载于:https://www.cnblogs.com/ccforeverd/p/3863095.html

weixin_30823683

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS模拟键盘事件 -- 原理及小例子

提问：键盘默认事件，比如tab切换，alt+f4关闭，ctrl+t新建等，如果不想通过键盘而是一些按钮点击来触发这些功能，该咋办呢？例子：先以tab为例上一个小例子：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫