撰于 阅读 38

vue中回车或其他键盘按键的事件监听

1.前言

很多交互做的好一点的网站，都会有这样的功能，当输入完用户名、密码后，直接敲击回车键就能完成登录了
在 Vue 开发里，用户与页面交互举足轻重，键盘输入是常见交互形式。精准监听键盘事件，能提升应用功能与体验，像表单提交时监听回车键，以及在游戏、文本编辑、导航控制等场景对各类按键响应处理，都可让交互更便捷高效。下面，我们深入探究 Vue 中回车及其他常用键盘值的事件监听实现，助力开发者打造更灵活、交互性强的 Vue 应用。

2. 代码实现

在你需要添加监听的组件脚本中添加代码：

<script setup>
// 省略...
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

// 省略...

// 按回车键后，执行登录事件
function onKeyUp(e) {
    console.log(e)
    if (e.key == 'Enter') {
        onSubmit()
    }
}

// 添加键盘监听
onMounted(() => {
    console.log('添加键盘监听')
    document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener('keyup', onKeyUp)
})
</script>

首先，我们引入了 onMounted 、onBeforeUnmount 生命周期方法，然后在 onMounted() 方法中添加了键盘监听事件，当键盘的 key 值为 Enter 时，也就是回车键时，直接调用 onSubmit() 登录。然后在 onBeforeUnmount() 生命周期方法中，移除了键盘监听事件。

3. 其他一些键盘按键

3.1 监听方向键（上、下、左、右）

function onKeyUp(e) {
    console.log(e);
    if (e.key === 'ArrowUp') {
        // 在这里执行向上箭头键被按下时的操作，比如改变列表选中项的索引
        console.log('向上箭头键被按下');
    }
}

对于向下箭头键（ArrowDown）、向左箭头键（ArrowLeft）和向右箭头键（ArrowRight），只需将e.key的值分别修改为ArrowDown、ArrowLeft和ArrowRight即可。

3.2 监听功能键（如 Ctrl、Shift、Alt）

function onKeyUp(e) {
    console.log(e);
    if (e.ctrlKey) {
        // 这里可以执行当Ctrl键被按下时的操作，比如配合其他键实现复制、粘贴等功能的快捷键操作
        console.log('Ctrl键被按下');
    }
}

对于Shift键，可以通过e.shiftKey来判断，对于Alt键，可以通过e.altKey来判断。如果要同时监听多个功能键和其他按键的组合，比如Ctrl + Enter，可以这样写：

function onKeyUp(e) {
    console.log(e);
    if (e.ctrlKey && e.key === 'Enter') {
        // 执行Ctrl + Enter组合键被按下时的操作
        console.log('Ctrl + Enter组合键被按下');
    }
}

3.3 监听字母和数字键

监听字母键和数字键与监听回车键类似。例如，要监听字母a键：

function onKeyUp(e) {
    console.log(e);
    if (e.key === 'a') {
        // 在这里执行字母a键被按下时的操作，比如在输入框中添加字符a
        console.log('字母a键被按下');
    }
}

对于数字键，比如1键，将e.key的值设置为1即可。同样的方法适用于所有的字母（区分大小写）和数字键。

3.4 监听退格键（Backspace）和删除键（Delete）

function onKeyUp(e) {
    console.log(e);
    if (e.key === 'Backspace') {
        // 在这里执行退格键被按下时的操作，比如在输入框中删除前一个字符
        console.log('退格键被按下');
    }
}

function onKeyUp(e) {
    console.log(e);
    if (e.key === 'Delete') {
        // 在这里执行删除键被按下时的操作，比如在输入框中删除选中的内容
        console.log('删除键被按下');
    }
}

3.5 监听 Page Up 和 Page Down 键

function onKeyUp(e) {
    console.log(e);
    if (e.key === 'PageUp') {
        // 在这里执行Page Up键被按下时的操作，比如在分页列表中向上翻页
        console.log('Page Up键被按下');
    }
}
function onKeyUp(e) {
    console.log(e);
    if (e.key === 'PageDown') {
        // 在这里执行Page Down键被按下时的操作，比如在分页列表中向下翻页
        console.log('Page Down键被按下');
    }
}
#vue