js键盘事件以及键盘事件拦截

更新日期: 2019-10-21 阅读: 3.8k 标签: 键盘

一.键盘事件

  • onkeydown: 按下键盘时触发

  • onkeypress: 按下有值的键时触发

    注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发对于有值的键,按下时先触发 keydown 事件,再触发这个事件

  • onkeyup:松开键盘时触发该事件


二.组合键

  • ctrl相关
  • alt相关
  • meta (Mac键盘是一个四瓣的小花,Windows键盘是Windows键) 相关

  • shift相关

写一个举例其他都类似

比如ctrl+c

window.onkeydown=function (e) {
    if (e.ctrlKey) {     //其他几个类似shiftkey,altkey,metakey
        if( e.key == 'c'){     //这里最好用keycode可以无视大小写,你要是区分大小写最好这样写
            console.log('ctrl+c')
        }
    }
}

//一般简写
window.onkeydown=function (e) {
    if (e.ctrlKey&&e.key == 'c'){console.log('ctrl+c')}
}


三.拦截preventDefault

比如拦截ctrl+h事件

<script>
    window.onkeydown=function (e) {
        if (e.ctrlKey) {
                if( e.key == 'h'){
                    console.log('ctrl+h')
                    e.preventDefault();
                }
        }
    }
</script>

但是有些按键没法拦截具体为啥没有深究过也没用到过,比如 Chrome

CtrlN
CtrlShiftN
CtrlT
CtrlShiftT
CtrlW
CtrlShiftW
//没法拦截 

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6545

相关推荐

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

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

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

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

移动端调起软键盘导致 position:fixed 偏移

app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现t toast 跳动的现象;关于 position: fixed首先来看,MDN 中对 position: fixed 的说明:

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

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

vue中监听返回键

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

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

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

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

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

使用mui搜索框触发手机软键盘搜索按钮事件

要虚拟键盘显示“搜索”二字,需满足以下两个条件:(1)设置input属性 type=‘search’(2)input需在form表单中,若是实现点击搜索,实现搜索事件,需要对按键进行监听。注意要点:

h5手机键盘弹出收起的处理

前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结

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

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

点击更多...

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