js和jquery实现监听键盘事件示例代码

 更新时间:2020年06月24日 10:02:16   作者:奋飛  
这篇文章主要为大家介绍了js实现监听键盘事件示例代码,监听键盘组合键CTRL+C,以便做出对应的响应,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

项目中要监听键盘组合键CTRL+C,以便做出对应的响应。查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox、Chrome、IE中均可以使用。

一、使用javascript实现

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title></title> 
 <script> 
  function keyListener(event){ 
  if (event.ctrlKey && event.keyCode === 86){ 
   alert('你按下了CTRL+V'); 
  } 
  } 
 </script> 
 </head> 
 
 <body> 
 Ctrl+V:<textarea onkeydown="keyListener(event);">粘贴粘贴</textarea> 
 </body> 
 
</html> 

二、使用jquery实现

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title></title> 
 <script src="http://tztest4.ptmind.cn/js/jquery-1.8.0.min.js?v=3/11"></script> 
 <script> 
  $(function(){ 
  $("#aaa").keyup(function(event){ 
   if (event.ctrlKey && event.keyCode === 67){ 
   alert('你按下了CTRL+C'); 
   } 
  }); 
   
  }); 
  /* 
  * $('input').keyup(function(){...}); 
  * $('input').bind('keyup', function(){...}); 
  * $('input').live('keyup', function(){...}); 
  */ 
 </script> 
 </head> 
 
 <body> 
 Ctrl+C:<textarea id="aaa">复制复制</textarea> <br /> 
 </body> 
 
</html> 

三、说明

event.ctrlKey
功能:检测事件发生时Ctrl键是否被按住了。
语法:event.ctrlKey
取值:true | false  1|0
说明:
ctrlKey属性为true表示事件发生时Ctrl键被按下并保持,为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。

四、详细keyCode值列表

以上就是js和jquery实现监听键盘事件示例代码,希望对大家的学习有所帮助。

相关文章

  • Typescript使用修饰器混合方法到类的实例

    Typescript使用修饰器混合方法到类的实例

    这篇文章主要介绍了Typescript使用修饰器混合方法到类的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • js中判断用户输入的值是否为空的简单实例

    js中判断用户输入的值是否为空的简单实例

    本篇文章主要是对js中判断用户输入的值是否为空的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS实现仿Windows经典风格的选项卡Tab切换代码

    JS实现仿Windows经典风格的选项卡Tab切换代码

    这篇文章主要介绍了JS实现仿Windows经典风格的选项卡Tab切换代码,涉及JavaScript元素的遍历与样式的修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • webpack前端应用之基础打包实现

    webpack前端应用之基础打包实现

    本文主要介绍了webpack前端应用之基础打包实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • javascript函数的四种调用模式

    javascript函数的四种调用模式

    本文详细介绍了javascript函数的四种调用模式。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript之不可靠的undefined

    JavaScript之不可靠的undefined

    这篇文章主要介绍了JavaScript之不可靠的undefined,想深入JS的同学,可以参考下
    2021-05-05
  • JavaScript内存管理介绍

    JavaScript内存管理介绍

    这篇文章主要介绍了JavaScript内存管理介绍,本文讲解了内存生命周期、JavaScript的内存分配、通过函数调用的内存分配、当内存不再需要使用时释放等内容,需要的朋友可以参考下
    2015-03-03
  • 微信小程序实现搜索框功能

    微信小程序实现搜索框功能

    这篇文章主要为大家详细介绍了微信小程序实现搜索框功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript中错误正确处理方式小结你用对了吗

    JavaScript中错误正确处理方式小结你用对了吗

    本文将会讨论客户端JavaScript中的错误处理。主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。下面就让我们一起看看如何正确处理JavaScript中的错误
    2017-10-10
  • Js四则运算函数代码

    Js四则运算函数代码

    javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果
    2012-07-07

最新评论