Js如何监听键盘事件

更新日期: 2021-11-20阅读: 2.1k标签: 键盘

问题

如何监听键盘复制,粘贴与删除?

实现

监听复制粘贴和删除,兼容windows和mac:

const onKeyDown = (e) => {
  const { metaKey, ctrlKey, key } = e
  const isCtrlOrCommand = ctrlKey || metaKey
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') {
    console.log('复制')
    return
  }
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') {
    console.log('粘贴')
    return
  }
  if (['Delete', 'Backspace'].includes(key)) {
    console.log('删除')
    return
  }
}

当鼠标聚焦在其他元素上时,不触发键盘事件:

const onKeyDown = (e) => {
  const { tagName } = document.activeElement || {}
  if (tagName && tagName.toLocaleUpperCase() !== 'BODY') {
    return
  }
  
  const { metaKey, ctrlKey, key } = e
  const isCtrlOrCommand = ctrlKey || metaKey
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') {
    console.log('复制')
    return
  }
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') {
    console.log('粘贴')
    return
  }
  if (['Delete', 'Backspace'].includes(key)) {
    console.log('删除')
    return
  }
}

键盘事件有哪些?

监听键盘事件操作有三种:keydown, keypress, keyup。按下键盘触发键盘事件顺序为:keydown -> keypress ->keyup。

keydown
当用户按下键盘上的任意键时触发,会重复触发此事件;

keypress
当用户按下键盘上的字符键时触发,会重复触发此事件;

keyup
当用户释放键盘上的字符键时触发此事件;

区别

  • keypress: 只能捕捉单个字符,可以捕获单个字符的大小写,不区分小键盘和主键盘的数字字符,不能监听功能键;
  • keydown/keyup: 可以捕获组合键,不能区分字母的大小写, 区分小键盘和主键盘数字字符;

KeyboardEvent

KeyboardEvent 对象描述了用户与键盘的交互。每个对象都描述了用户与键盘(一个按键和修饰键的组合)的单个交互;

常用属性

属性名类型描述
altKeyBoolean当 Windows 上 Alt 键 或 Mac 上 Option 或 ⌥ 键被按下,该值为 true
metaKeyBoolean当 Mac 上 Command 键 或 Windows 上 ⊞ 键被按下,该值为 true
ctrlKeyBoolean当 Ctrl 键被按下,该值为 true
shiftKeyBoolean当 Shift 键被按下,该值为 true
codeString标识按下的具体是哪个物理键,键盘上每一个按键都对应一个唯一的值。
keyString指明具体输入的字符内容,如果是非打印字符(例如Enter键、Esc键、Shift键、Alt键等),则返回具体的非打印字符的英文名称,如果输入内容与输入法有关则返回固定的 Process 名称。
keyCodeNumber【过时属性,不推荐使用】此值是跟着键盘走,而不是字符内容。相同按键可能有不同keyCode,相同字符可能有不同keyCode。


链接: https://www.fly63.com/article/detial/10828

html的原生自定义键盘(数字版)

前端现在很多时候,由于要限制文本的输入格式(这里指只允许输入数字),常常需要使用到自定义键盘。自定义键盘难免涉及到复用,资源占用等问题,有时候还会由于封装不好导致事件混乱、或者由于动画效果没实现好导致看上去很尴尬

移动端input框被虚拟键盘挡住的js解决方法

在webapp开发过程中,当用户切换输入法额时候,会出现输入框被弹起的虚拟键盘遮挡住的情况,这时用户输入只能盲填 ,这会验证影响用户体验。

微信小程序仿input组件、虚拟键盘

仿照微信支付界面,金额输入框不能用input;要有光标,点击输入框调起虚拟键盘,点击输入框以外的地方隐藏输入框;第一个输入的是小数点要补全,比如:第一个输入的是小数点,则输入框显示为 0. ;

ionic开发中,输入法键盘弹出遮挡住div元素

采用ionic 开发中,遇到键盘弹出遮挡元素的问题。以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。引用:将命名好的指令名 :popupKeyBoardShow,按驼峰拆开用-连接成小写,如:popup-key-board-show。

关于ios的光标和键盘回弹问题

最近再做项目的时候(移动端),遇到了两个小问题,一个是ios端键盘不回弹的问题(微信浏览器),另一个是ios输入光标位置问题。就是点击一个按钮,要把输入框里面原来的内容加上一些固定的内容,然后一起输出到输入框。

可能这些是你想要的H5软键盘兼容方案

最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失

为什么程序员使用电脑时,很少使用鼠标,只需要键盘就能工作?

现在很多人在使用电脑的时候会特别依赖鼠标,因为使用鼠标操作会比较方便,身边有程序员的人可能会疑惑为什么他们在使用电脑的时候,不需要鼠标,只需要一个键盘就能工作了呢?

通过focusout事件解决IOS键盘收起时界面不归位的问题

今天在开发一个移动端的 H5 页面时,遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构

vue中监听返回键

在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿;利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!