在一些搜索框中，我们往往需要监听键盘的按下(
onkeydown
)或抬起(
onkeyup
)事件以进行一些操作。在原生js或者jQuery中，我们需要判断
e.keyCode
的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的
keyCode
值才能完成匹配，使用起来十分不便。
|
keyCode
|
实际键值
|
|
48到57
|
0到9
|
|
65到90
|
a到z（A到Z）
|
|
112到135
|
F1到F24
|
|
8
|
BackSpace（退格）
|
|
9
|
Tab
|
|
13
|
Enter（回车）
|
|
20
|
Caps_Lock（大写锁定）
|
|
32
|
Space（空格键）
|
|
37
|
Left（左箭头）
|
|
38
|
Up（上箭头）
|
|
39
|
Right（右箭头）
|
|
40
|
Down（下箭头）
|
参考：
JavaScript 获取键盘事件(键盘某个按键被按下)
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配
keyCode
，直接使用别名就能监听按键的事件。
<input @keyup.enter="function">
|
别名
|
实际键值
|
|
.delete
|
delete（删除）/BackSpace（退格）
|
|
.tab
|
Tab
|
|
.enter
|
Enter（回车）
|
|
.esc
|
Esc（退出）
|
|
.space
|
Space（空格键）
|
|
.left
|
Left（左箭头）
|
|
.up
|
Up（上箭头）
|
|
.right
|
Right（右箭头）
|
|
.down
|
Down（下箭头）
|
|
.ctrl
|
Ctrl
|
|
.alt
|
Alt
|
|
.shift
|
Shift
|
|
.meta
|
(window系统下是window键，mac下是command键)
|
另外，Vue中还支持组合写法：
|
组合写法
|
按键组合
|
|
@keyup.alt.67=”function”
|
Alt + C
|
|
@click.ctrl=”function”
|
Ctrl + Click
|
参考：
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到
.native
修饰符了，如：
<el-input
v-model="inputName"
placeholder="搜索你的文件"
@keyup.enter.native="searchFile(params)"
</el-input>
如果遇到
.native
修饰符也无效的情况，可能就需要用到
$listeners
了，具体用法请参考Vue官方文档：
将原生事件绑定到组件
。
背景在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
补充知识：
vue
给div绑定
keyup
的enter事件实现接电话（结合阿里云软电话SDK）
摘要：之前我们的接入的阿里云软电话SDK的功能，现在有个新的需求就是我们自己的弹窗
中
添加一个按钮可以接听电话，同时可以按键盘的Enter键接电话。（这里的很多废话，是为了记录当时想的逻辑）
实现思路：
1、点击事件接听电话
在create生命周期的时候，
监听
电话来了
1.onkeydown 事件会在用户按下一个键盘任意按键时触发，如果按住不放，则会重复触发此事件。
2.onkeypress 事件会在用户按下键盘上的字符键时触发，如果按住不放，则会重复触发。
3.on
keyup
事件会在键盘按键被松开时触发。
当用户按下键盘时弹出警示框显示键值
<!DOCTYPE html>
<html lan...
将
监听
事件绑定在document上，销毁组件时，再移除该事件
created() {
document.addEventListener('
keyup
', this.escEvent)
methods: {
escEvent(){
if(window?.event?.
keyCode
== 27) this.closeComp()
closeComp() {
// ...
document.onkeydown=(e)=>{
if(86 == e.
keyCode
&& e.ctrlKey){
document.addEventListener('paste', (event)=> {
let paste = (event.clipboardData || window.clipboardData).g
2.金额校验（只能输入数字和小数点）
oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
3.姓名校验（只能输入汉字，字母和部分特殊字符）
on
keyup
="value=value.replace(/[\d\@#\$%\^&
在
Vue
组件
中
，你可以使用 `$refs` 对象来
监听
元素的滚动事件。
例如，假设你有一个名为 `my-component` 的
Vue
组件，它的模板包含一个名为 `scrollable` 的 div 元素，你可以在组件的 `mounted` 生命周期钩子
中
使用下面的代码来
监听
滚动事件：
mounted() {
this.$refs.scrollable.addEventListener('scroll', this.handleScroll);
methods: {
handleScroll(event) {
// 处理滚动事件
注意，如果你希望在组件销毁时移除滚动事件
监听
器，你可以在组件的 `beforeDestroy` 生命周期钩子
中
使用 `removeEventListener` 方法来移除
监听
器。
beforeDestroy() {
this.$refs.scrollable.removeEventListener('scroll', this.handleScroll);
