原生js监听键盘上下键事件实例

原生js监听键盘上下键事件实例:

效果如下：点击测试4，然后按键盘向下键，会跳到测试7。

up.png

down.png

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .list-ul{
            width: 200px;
        }
        .list-ul li{
            display: inline-block;
        }
        a:focus{
            outline: 5px solid green;
        }
    </style>
</head>
<body>
<ul id="list-ul">
    <li><a href="###">测试1</a></li>
    <li><a href="###">测试2</a></li>
    <li><a href="###" class="down">测试3</a></li>
    <li><a href="###" class="down">测试4</a></li>
    <li><a href="###" class="down">测试5</a></li>
    <li><a href="###" class="up">测试6</a></li>
    <li><a href="###" class="up">测试71</a></li>
    <!--<li><a href="###">测试71</a></li>-->
    <!--<li><a href="###">测试71</a></li>-->
    <li><a href="###">测试8</a></li>
    <li>测试9</li>
</ul>
</body>
<script type="text/javascript">
        //封装取类方法
    function getClass(className, parentNode){
        var node = null;
        var temps = [];
        if (parentNode != undefined) {
            node = parentNode;
        } else {
            node = document;
        }
        var all = node.getElementsByTagName('*');
        for (var i = 0; i < all.length; i ++) {
            if (all[i].className == className) {
                temps.push(all[i]);
            }
        }
        return temps;
    }
    var listUl=document.getElementById("list-ul");
//    var down=listUl.querySelectorAll(".down");
//    var up=listUl.querySelectorAll(".up");
    var down=getClass("down",listUl);
    var up=getClass("up",listUl);
    for(var i=0;i<down.length;i++){
        (function(i){
                //监听键盘向下键事件
            down[i].onkeyup=function(event){
                var event=window.event||event;
                if(event.keyCode==40){
                    if(up[i]){
                        up[i].focus();
                    }else{
                        up[0].focus();
                    }
                }
            }
        })(i);
    }
    for(var i=0;i<up.length;i++){
        (function(i){
                //监听键盘向上键事件
            up[i].onkeyup=function(event){
                var event=window.event||event;
                if(event.keyCode==38){
                    if(down[i]){
                        down[i].focus();
                    }else{
                        down[0].focus();
                    }
                }
            }
        })(i);
    }
</script>
</html>
￥打赏
标签:

上一篇：TypeScript学习笔记4：类

下一篇：TypeScript学习笔记5：函数