触发键盘事件及其区别

最新推荐文章于 2024-03-17 17:15:54 发布

小游-523

最新推荐文章于 2024-03-17 17:15:54 发布

阅读量765

点赞数

分类专栏： js vue element-ui 文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/weixin_49099187/article/details/109738762

版权

js 同时被 3 个专栏收录

3 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

element-ui

3 篇文章

订阅专栏

当输入框的值发生变化时，可以通过keydowm、keyup、input、onchange、blur事件观察其值的变化，但它们的应用时机与应用场景存在显著差异。

1、实时监听观察

需要实时观察到用户每次键盘输入的变化，必须要用keydown、keyup与input、onchange与blur。
其中keyup和input都能及时获取到用户输入的值，而keydown不会将当前的键值计入到输入框的值。
实例如下：
html:

<input type="text" id="username">

注册事件

//注册input事件
username.addEventListerner("input",event=>{
    result.push({
        event: 'input',
        value: this.value,
        keyCode: event.keyCode    
    })
})
//注册keydown事件
username.addEventListerner("keydown",event=>{
    result.push({
        event: 'keydown',
        value: this.value,
        keyCode: event.keyCode    
    })
})
//注册change事件
username.addEventListerner("change",event=>{
    result.push({
        event: 'change',
        value: this.value,
        keyCode: event.keyCode    
    })
})
//注册blur事件
username.addEventListerner("blur",event=>{
    result.push({
        event: 'blur',
        value: this.value,
        keyCode: event.keyCode    
    })
    console.log(result) //输出结果
})

在输入框中依次输入’abc’,最后输出result，结果如下：
在这里插入图片描述

input适用于实时查询，没输入一个字符就会触发该事件。
keyup.enter则是在pc端点击回车触发，在手机端点击键盘的确定键才会触发。
change与enter事件相似，在手机都是要经过触发虚拟键盘才会触发，使用方式同input事件
注：
在ios手机上会出现问题:如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询，这时在安卓手机上没有问题，但是在ios手机上会出现多次触发的情况。解决办法：对input的值进行监听（watch），把原本需要绑在input框的事件在监听变化时调用。
blur,要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。
注：
如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=""来代替@blur。

结论：
（1）keydown事件发生时，输入值并没有发生变化，所以keydown可用于阻止某些输入字符的显示。
（2）input事件发生时，无法获取到keyCode值，并且紧随在keydown事件之后。
（3）keyup事件最后发生，一次键盘敲完事件彻底完成。
（4）change事件值会发生在输入完成后，也就是输入框失去焦点之前。

blur与change的区别：
（1）没有进行任何输入时，不会触发change
在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更情况。
（2）输入后值并没有发生变更
这种情况是指，在没有失焦的情况下，在输入框内进行返回的删除与输入操作，但最终的值与原值一样，这种情况下，keydown、input、keyup、blur都会触发，但change依旧不会触发。
总结：
change事件只有值发生改变时才触发
blur时输入框失去焦点就会触发，不管输入值是否变化

2.输入完成后观察

当用户完成所有的输入时，这时必定会发生blur事件，只是这时才会触发change,所以可以用blur+change监听用户输入框是否完成，输入框的验证多半发生在这个时候。

3.输入事件流

输入框发生的事件流程依次为focus->keydown->input->keyup->change->blur。

4.vue的按键修饰符

vue运行为v-on在监听事件时，添加了特殊的键盘修饰符，还给出了常用的案件别名，就不用记keyCode
如：

<input @keyup.enter="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete(捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
注意：
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

还有一些组合按键:
.ctrl
.alt
.shift
.meta(window系统是window键，mac是command键)

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

注意：
如果用了封装组件的话，比如element-ui，这时使用按键修饰符需要加上.native
如：

<el-input v-mode="username" placeholde="请输入用户名" @keyup.enter.native="search()"></el-input>

@keyup.enter.native: 该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

参考原文：
https://blog.youkuaiyun.com/yiifaa/article/details/52372022

vue.js官网 — 按键修饰符
https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6