JS捕获页面按键事件

最新推荐文章于 2024-06-20 12:40:54 发布

学习&实践爱好者

最新推荐文章于 2024-06-20 12:40:54 发布

阅读量3k

点赞数 2

分类专栏： HTML5与CSS3 JavaScrip技术前端开发文章标签： javascript 前端

本文链接：https://blog.csdn.net/cnds123/article/details/122136978

版权

JavaScrip技术同时被 3 个专栏收录

131 篇文章 24 订阅

订阅专栏

HTML5与CSS3

82 篇文章 15 订阅

订阅专栏

前端开发

68 篇文章 4 订阅

订阅专栏

JS捕获页面按键事件

有时候我们需要捕获页面上的按键（如回车键）事件，以达到一些特殊效果，例如在登录页面用户输入完登录名和密码后习惯直接敲回车，这时需要捕获回车事件。

浏览器通过keyCode属性可以获取按键代码。

document对象的按钮弹起事件(捕获按下事件也可以)，浏览器会将用户按下的按键信息对象传递到事件回调函数中(以参数的形式)，传入函数中的这个按键信息中包含了一个用来识别按键的编号(每个按键都有一个对应的编号)。

例1、模拟输入后回车验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> JS捕获页面按键事件</title>
</head>
<body>
<p>输入文本回车验证处理</p>
<input type="text" id="me"/>
<script>
    window.onload=function(){
          document.getElementById("me").onkeydown=function(event){
               if(event.keyCode===13){  //回车键的键值：13
                     alert('对你的输入：' + document.getElementById("me").value + '  进行验证...')
              }
         }
     }
</script>
</body>
</html>

我将此保存文件名为：捕捉按键1.html

用浏览器打开，参见下图：

例2、按下E键，输出HELLO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>捕捉E键</title>
</head>
<body >
<p>按下键E，在文本框中显示HELLO</p>
<input value=""  id="me"/>
<script>
        document.onkeyup = function (ev) { //按键信息对象以函数参数的形式传递进来
    	var code =  ev.keyCode;  //取出按键代码
    	if (code == 69) { // 键E代码69 
      	     //alert('HELLO')
             document.getElementById("me").value = 'HELLO';
    	    }
        }
</script>
</body>
</html>

我将此保存文件名为：捕捉按键2.html

用浏览器打开，参见下图：

例2代码可改为如下，效果一样。

<html> 
<head> 
<meta charset="utf-8"> 
<title>捕捉E键</title>
</head> 
<body onkeyup="test1(event)"> 
<p>按下键E，在文本框中显示HELLO</p>
<input value=""  id="me"/>
<script> 
   function test1(ev){ //按键信息对象以函数参数的形式传递进来
     var code =  ev.keyCode;  //取出按键代码
    	if (code == 69) { // 键E代码69 
      	     //alert('HELLO')
             document.getElementById("me").value = 'HELLO';
            }
   } 
</script> 
</body> 
</html>

两者代码差异之处，参见下图：