js键盘事件keydown事件、防止重复触发以及组合键的配合使用

 更新时间:2024年04月18日 10:11:36   作者:勇敢*牛牛  
这篇文章主要给大家介绍了关于js键盘事件keydown事件、防止重复触发以及组合键配合使用的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

js键盘事件keydown事件,防止重复触发

键盘事件类型主要有三种: keydown 、keypress(不建议使用,部分浏览器已放弃)和 keyup 。

添加普通键盘keydown事件

// 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    // 输出按下的键的键码
    console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
  });

但是此事件会如果不释放按键就会重复触发,如何阻止呢?

阻止keydown事件重复触发

①使用一个标志变量来跟踪按键的状态

let keyDownFlag = false;

  // 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    if (!keyDownFlag) {
      keyDownFlag = true;
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }
  });

  // 监听键盘释放事件
  document.addEventListener('keyup', function() {
    keyDownFlag = false;
  });

②通过事件自带的属性判断

repeat 属性可以用于判断键盘事件是否是由按键保持按下而持续触发的。

// 监听键盘按下事件
  document.addEventListener('keydown', function(event) {
    if (!event.repeat) {
      console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
    }

在这个例子中,event.repeat 属性被用于检查是否是由按键保持按下而触发的事件。如果 event.repeat 为 false,则表示这是一个新的按键事件,而不是持续触发的事件。

组件键的配合使用

组件键一般就是就是通过keydown事件来触发

document.onkeydown = function (oEvent) {
    console.log(oEvent);
}

可以看到event对象中返回很多信息,其中keycode属性中包含一份代码,是键盘上对应的ASCII码,type是触发事件的类型等等…

这里我们有几个属性是我们用的到的,就是altkey属性和ctrlkey属性还有shiftkey。它们代表着键盘上的alt、ctrl、shift键对于事件触发的判断。当事件由这几个键触发时,它们的值会变成true.

那我可以通过上边的内容结合这几个属性来监听键盘事件。

  • 比如要监听ctrl + s的组合事件
document.onkeydown = functionb(oEvent) {
  var oEvent = oEvent || window.oEvent; 
  //获取键盘的keyCode值
  var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
  //获取ctrl 键对应的事件属性
  var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
   if( oEvent.nKeyCode == 83 && bCtrlKeyCode  ) {
      alert('save');
       //doSomeThing...
   }
}
  • 比如要监听Alt+ q的组合事件
document.onkeydown = functionb(e) {
	if(e.altKey && e.keyCode == 81){
	      if(e.repeat){
	        return 
	      }
	      //todo somethink
    }
}

虽然mac电脑操作有别于普通win电脑,但并不代表没有alt键。 在mac电脑找到alt键并不难,键盘左下角的option键其实就是苹果的alt键,旁边的control键对应pc电脑的ctrl键,command键对应是win键,

附:判断按的按键是否为ctrl、shift、alt

console.log(ev.ctrlKey);
console.log(ev.shiftKey);
console.log(ev.altKey);

总结

到此这篇关于js键盘事件keydown事件、防止重复触发以及组合键的配合使用的文章就介绍到这了,更多相关js keydown事件防止重复触发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用JavaScript制作一个搞怪的兔子动画效果

    利用JavaScript制作一个搞怪的兔子动画效果

    又是一年新春之际,祝福大家兔年快乐!给大家介绍一个有趣的动效(兼容 IE),页面右下角有一只搞怪的兔子,鼠标在页面中悬停时,兔子会跟着做出不同的动作和表情,感兴趣的小伙伴可以了解一下
    2023-01-01
  • 小程序自定义单页面、全局导航栏的实现代码

    小程序自定义单页面、全局导航栏的实现代码

    这篇文章主要介绍了小程序自定义单页面、全局导航栏的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Textarea根据内容自适应高度

    Textarea根据内容自适应高度

    使用JAVASCRIPT控制Textarea内容自适应高度,实施起来很简单,很平滑。
    2013-10-10
  • 微信小程序合法域名配置方法

    微信小程序合法域名配置方法

    这篇文章主要介绍了微信小程序合法域名配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript防抖案例讲解

    JavaScript防抖案例讲解

    这篇文章主要介绍了JavaScript防抖案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS字符串转换为数组的4 个方法示例小结

    JS字符串转换为数组的4 个方法示例小结

    这篇文章主要介绍了JS字符串转换为数组的4 个方法示例小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    微信小程序web-view环境下H5跳转小程序页面方法实例代码

    微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验,下面这篇文章主要给大家介绍了关于微信小程序web-view环境下H5跳转小程序页面方法的相关资料,需要的朋友可以参考下
    2022-08-08
  • 微信小程序商城项目之侧栏分类效果(1)

    微信小程序商城项目之侧栏分类效果(1)

    这篇文章主要为大家详细介绍了微信小程序实战商城系列之侧栏分类效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js中常用的Math方法总结

    js中常用的Math方法总结

    本文主要介绍了js中常用的Math方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js判断undefined变量类型使用typeof

    js判断undefined变量类型使用typeof

    js判断undefined变量类型使用typeof可以轻松实现,不了解的朋友可以参考下哈,希望对你有所帮助
    2013-06-06

最新评论