JS keycode 事件响应

最新推荐文章于 2022-05-19 17:37:31 发布
最新推荐文章于 2022-05-19 17:37:31 发布
阅读量129 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ChandlerVer5/p/js_keycode.html
版权 
<script language="javascript">
function keyevent(){
if(event.keyCode==13)
alert("你按了回车键");
}
document.onkeydown = keyevent;//注册document.onkeydown事件
</script>

当用户按回车键时，就会执行keyevent()这个函数。可以做回车提交表单，或其它的事件！

keyCode是返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；如果要使用组合键，则可以利用event.ctrlKey，event.shiftKey，event .altKey判断是否按下了ctrl键、shift键以及alt键.

常用keycode
keycodekeycode
left37up38
right39down40
149250
351a65
shift16ctrl17
alt18enter13

image

image

image

示例：

 
 
<!DOCTYPE html>

 
 
<html>

 
 
<head>

 
 
    <title>键盘事件keycode</title>

 
 
</head>

 
 
<body>

 
 
    left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;up&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;down<br />

 
 
    ctrl + up&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl + down<br />

 
 
    ctrl + 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl + 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl + 3<br />

 
 
    a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl + a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl + shift + a<br />

 
 
    <script type="text/javascript">

 
 
        document.onkeydown = function (event) {

 
 
            event = event || window.event;

 
 
            bCtrlKey = event.ctrlKey;

 
 
            bShiftKey = event.shiftKey;

 
 
            switch (event.keyCode) {

 
 
                case 37:

 
 
                    alert("left");

 
 
                    break;

 
 
                case 38:

 
 
                    if (bCtrlKey) {

 
 
                        alert("ctrl+up");

 
 
                        break;

 
 
                    }

 
 
                    alert("up");

 
 
                    break;

 
 
                case 39:

 
 
                    alert("right");

 
 
                    break;

 
 
                case 40:

 
 
                    if (bCtrlKey) {

 
 
                        alert("ctrl+down");

 
 
                        break;

 
 
                    }

 
 
                    alert("down");

 
 
                    break;

 
 
                case 49:

 
 
                    bCtrlKey && (alert("ctrl+1"));

 
 
                    break;

 
 
                case 50:

 
 
                    bCtrlKey && (alert("ctrl+2"));

 
 
                    break;

 
 
                case 51:

 
 
                    bCtrlKey && (alert("ctrl+3"));

 
 
                    break;

 
 
                case 65:

 
 
                    if (bCtrlKey) {

 
 
                        if (bShiftKey) {

 
 
                            alert("自定义");

 
 
                            break;

 
 
                        }

 
 
                        alert("全选");

 
 
                        break;

 
 
                    }

 
 
                    alert("a");

 
 
                    break;

 
 
                case 67:

 
 
                    bCtrlKey && (alert("复制"));

 
 
                    break;

 
 
                case 86:

 
 
                    bCtrlKey && (alert("粘贴"));

 
 
                    break;

 
 
            }

 
 
            return false;

 
 
        }

 
 
    </script>

 
 
</body>

 
 
</html>
 
 
--------------------------------------------------------------------------------------------- 
 
 
 
 
<script language="javascript">

 
 
     function keyevent(){

 
 
     if(event.keyCode==13)

 
 
     alert("#$%#%#^^%");

 
 
     }

 
 
     document.onkeydown = keyevent;

 
 
</script>

 
 
event.keyCode值为37﹐38﹐39﹐40对应按下的方向键分別是 左﹐上﹐右﹐下

 
 
"javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;");

 
 
if(event.keycode==13)就代表按下的是回车键盘

 
 
"javascript:if (event.keyCode > 45 && event.keyCode < 57) event.returnValue = false;");

 
 
 
 
---------------------------------------------------------------------------------------------- 
 
 
 
 
 
<参考：http://lfsp.btwlo.com/keycode.html & http://www.cnblogs.com/xingqiba/archive/2012/06/12/2546148.html & http://www.cnblogs.com/kuikui/archive/2012/02/09/2343645.html>
 

 

转载于:https://www.cnblogs.com/ChandlerVer5/p/js_keycode.html

                

        

        




    




    

      

        

            

              
                
                  azhen5222
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法

				
			

			

				

					12-02
				

			

		

		

			
				
当单击按键时触发事件

[removed] = function (e) {
      e = e || event;
      if (e.keyCode == 13) { //判断是否单击的enter按键(回车键)
        document.getElementByIdx_x_x("txtid").click();
        return false;
      }
  }

解释：keycode的值表示对应键盘的那个键
keycode     8 = BackSpace BackSpace
keycode     9 = Tab Tab
keycod

			
		

	



                

              
                



	

		

			

				
					
js keycode 事件响应

				
			

			

				

					山鹰的专栏
				

				

					08-27
					
					552
					
				

			

		

		

			
				
function keyevent(){
      if(event.keyCode==13)
      alert("你按了回车键");
      }
      document.onkeydown = keyevent;


当用户按回车键时，就会执行keyevent()这个函数。可以做回车提交表单，或其它的事件！

另搜集了一些资料，供网友参考

我书上都没写的

			
		

	



                


  
              

                


	

		

			

				
					
Javascript keyevent

				
			

			

				

					XF的专栏
				

				

					03-07
					
					3069
					
				

			

		

		

			
				
键盘上的键分为字符键和功能键两种，也称为可打印键和不可打印键。
功能键包括Esc、F1~F12、Tab、Caps Lock、Shift、Ctrl、Insert、Home、Page Up、Page Down、Delete、End、Up、Down、Left、Right、Enter等


键盘事件的触发顺序为：keydown - keypress - keyup。
keydown和keyup是

			
		

	





	

		

			

				
					
keycode 键盘按键触发事件

				
			

			

				

					weixin_30888413的博客
				

				

					11-18
					
					230
					
				

			

		

		

			
				
js通过keyCode值判断单击键盘上某个键，然后触发指定的事件



当单击按键时触发事件
document.onkeydown = function (e) {
e = e || event;
if (e.keyCode== 13) { //判断是否单击的enter按键(回车键)
...

			
		

	



		

			
		



	

		

			

				
					
js获取键盘按键响应事件(兼容各浏览器)

				
			

			

				

					12-10
				

			

		

		

			
				
代码如下:[removed][removed]=function(event){var e = event ||...if(e && e.keyCode==27){ // 按 Esc //要做的事情}if(e && e.keyCode==113){ // 按 F2 //要做的事情} if(e && e.keyCode==13){ // enter 键//要做的事

			
		

	





	

		

			

				
					
浅谈angularjs中响应回车事件

				
			

			

				

					01-19
				

			

		

		

			
				
”：（黄色背景内容为响应回车事件涉及到的代码）  <html ng-app=myApp> <head>  <meta charset=utf-8>  <meta http-equiv=Content-Type content=text/html; charset=utf-8 />  <meta ...

			
		

	





	

		

			

				
					
javascript键盘响应js

				
			

			

				

					04-23
				

			

		

		

			
				
只需要引入js文件 没有switch case 没有if 只用关心键盘响应函数 欢迎提出意见    	<title>key test 	<script src="keyProcess.js"> 	 		//一次性设置a-z的所有符号 		var arr = []; 		//a的keyCode是65，所以先设置...

			
		

	





	

		

			

				
					
javascript 一个函数对同一元素的多个事件响应

				
			

			

				

					12-01
				

			

		

		

			
				
代码如下: var testButton=document.getElementById(“testButton”); function handlerTest() { var oEvent=window.event;//for IE //var oEvent=arguments[0];...oEvent.keycode); } } testButt

			
		

	





	

		

			

				
					
JavaScript onkeydown事件入门实例(键盘某个按键被按下)

				
			

			

				

					01-21
				

			

		

		

			
				
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件。与 onkeypress 事件不同的是，onkeydown 事件是响应任意键按下的处理（包括功能键），onkeypress 事件只响应字符键按下后的处理。 提示 ...

			
		

	





	

		

			

				
					
JS——事件详情（键盘事件：keyCode、ctrlKey...）

				
			

			

				

					weixin_30349597的博客
				

				

					06-03
					
					610
					
				

			

		

		

			
				
键盘事件
1》keyCode
　　1）keyCode方法——即：获取用户按下键盘所对应的键值
　　2）案例：键盘控制div移动
案例代码如下图：


2》其他属性
　　1）ctrlKey、shiftKey、altKey（这三个的用法相同）
用法：ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。若点击了ctrl键，则为true；反之则为...

			
		

	





	

		

			

				
					
键盘事件与keyCode属性

				
			

			

				

					qq_43614064的博客
				

				

					09-04
					
					175
					
				

			

		

		

			
				
例子

结果：会输出摁键的键码

应用：
 <style>
          .text span{font-weight: bold;color: #f00;}
          em{font-style: normal;}
        </style>
        <script>
            window.onload=function(){
             var text=document.getElementById("t.

			
		

	





	

		

			

				
					
键盘事件的KeyCode分析(转载)

				
			

			

				

					sifeimeng的专栏
				

				

					06-05
					
					311
					
				

			

		

		

			
				

转载自： http://www.tychio.net/tech/2013/06/06/event-keycode.html
 
 
keyup和keydown事件以及keyCode和which属性
我想关于键盘事件最常见的实例就是回车提交表单了，恐怕每个前端都有一段烂熟于胸的代码用来实现这个功能。以前我也只是做了这样一个功能，也许它的代码是这样的：
function enter (p_...

			
		

	





	

		

			

				
					
转：event.keyCode用法及列表

				
			

			

				

					u010100177的专栏
				

				

					01-10
					
					620
					
				

			

		

		

			
				
event.keyCode用法及列表





HTML

用户名：

密码：

JavaScript：
JumpByEnter(UserPwd) 函数功能：输入完用户名按回车，焦点转向密码输入框

IsEnterKeyPress()功能：输入完密码并按回车，则登录

function JumpByEnter(NextElement){
     var lKe

			
		

	





	

		

			

				
					
event.keyCode用法及列表

				
			

			

				

					Swift猎手~
				

				

					03-21
					
					579
					
				

			

		

		

			
				
HTML
用户名：
密码：
JavaScript：
JumpByEnter(UserPwd) 函数功能：输入完用户名按回车，焦点转向密码输入框
IsEnterKeyPress()功能：输入完密码并按回车，则登录
function JumpByEnter(NextElement){
     var lKeyCode = (navigator.appname=="Netscape")?

			
		

	





	

		

			

				
					
键盘事件及小知识

				
			

			

				

					YourLie_in_April的博客
				

				

					05-19
					
					410
					
				

			

		

		

			
				
键盘事件：（一般用于表单和全局）

onkeyup： 当键盘在某个HTML元素上弹起的时候触发（优先使用up）。

onkeydown：当键盘在某个HTML元素上按下的时候触发（如果按下不放手，会一直触发）。

onkeypress ： 键盘按下（只支持字符键）只产生字符后才触发。


document.onkeyup = function(){
    console.log("我是按下弹起触发的");
}
document.onkeydown = function(){
    console.log(

			
		

	





	

		

			

				
					
键盘事件(使用switch语句改写 div 上下左右移动的功能)

				
			

			

				

					weixin_57783177的博客
				

				

					07-17
					
					630
					
				

			

		

		

			
				
键盘事件

开发工具与关键技术：DW HTML

作者：尘则


撰写时间：2021/7/17


使用switch语句改写 div 上下左右移动的功能

先看结果：





代码如下：



<!DOCTYPE html>

<html lang="en">

<head>



 <meta charset="UTF-8">

 <title>键日</title>



</head>

...

			
		

	





	

		

			

				
					
JavaScript 逻辑运算符在switch case中不生效的问题

				
			

			

				

					Dpl0216的博客
				

				

					02-15
					
					1727
					
				

			

		

		

			
				
多种不同的Case要执行相同的代码应该如何做呢？

			
		

	





	

		

			

				
					
JS中键盘事件及keyCode对照表

					
热门推荐

				
			

			

				

					汉堡请不要欺负面条
				

				

					06-01
					
					2万+
					
				

			

		

		

			
				
一.Keycode对照表二.键盘事件1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。keydown：按键按下keyup：按键抬起keypress：按键按下抬起2.使用时//jq的方式
$("input").keydown(function(){
	$("input").css("background-color","#FFFFCC");
});
$(...

			
		

	





	

		

			

				
					
js+监听键盘按下事件

					
最新发布

				
			

			

				

					02-02
				

			

		

		

			
				
在JavaScript中，可以通过监听键盘按下事件来实现对键盘输入的响应。以下是一种常见的实现方式：

1. 首先，需要获取要监听的元素，可以是整个文档或特定的元素。例如，可以使用`document`对象来监听整个文档的键盘按下事件，或者使用`getElementById`等方法获取特定元素。

2. 接下来，使用`addEventListener`方法来添加键盘按下事件的监听器。该方法接受两个参数：要监听的事件类型（这里是`keydown`）和事件处理函数。

3. 在事件处理函数中，可以通过`event`参数来获取触发事件的相关信息，如按下的键码、按下的键值等。

下面是一个简单的示例代码：

```javascript
// 获取要监听的元素
var element = document;

// 添加键盘按下事件的监听器
element.addEventListener("keydown", function(event) {
  // 获取按下的键码
  var keyCode = event.keyCode || event.which;

  // 执行相应的操作
  console.log("按下了键码为 " + keyCode + " 的键");
});
```

在上述示例中，我们通过`console.log`语句将按下的键码输出到控制台。你可以根据需要在事件处理函数中执行其他操作，比如触发其他函数、修改页面内容等。



			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值