html 键盘按键与按钮功能关联

最新推荐文章于 2024-04-22 11:43:36 发布

智绘山河

最新推荐文章于 2024-04-22 11:43:36 发布

阅读量6.6k

点赞数 1

分类专栏： Front-end development 文章标签： keycode html js

本文链接：https://blog.csdn.net/meiqi0538/article/details/82426275

版权

Front-end development 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

键盘中每个按键都对应一个数值，通过匹配进行功能函数得划分，主要使用得是键盘按键事件，onkeydown;案例如下：

<!DOCTYPE html>
<html >
<head>
    <title></title>
</head>
<script type="text/javascript">
    function init(){
        //页面键盘点击时触发
        document.onkeydown=showKeyDown;
    }
    function showKeyDown(evt){
        evt = (evt) ? evt : window.event ;

        if(evt.keyCode==38){
            fun1(); 
        }
        if(evt.keyCode==40){
            fun2(); 
        }
    }
    function fun1(){
        alert("功能一测试");
    }
    function fun2(){
        alert("功能二测试");
    }

</script>
<body onload="init()">
    <div align="center">
        <p>说明：键盘"上"为功能一测试</p>
        <p>键盘"下"为功能二测试</p>
        <button onclick="fun1()">功能一测试</button>
        <button onclick="fun2()">功能二测试</button>
    </div>

</body>
</html>