键盘事件修饰符

babywenever

已于 2023-12-02 13:37:32 修改

阅读量183

点赞数

文章标签：前端 javascript 开发语言

于 2023-11-29 18:25:20 首次发布

本文链接：https://blog.csdn.net/babywenever/article/details/134696353

版权

@keyup.enter：按下回车触发

@keyup.delete：按下删除触发

@keyup.esc：按下esc触发

@keyup.space：按下空格触发

@keyup.tab：按下tab触发

@keyup.down：按下 ↓ 触发

@keyup.w：按下w触发

@keyup.alt.c：按下alt+c触发

备注：也可以使用keyCode去指定具体的按键（不太推荐）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue基础</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <!--
            TODO:
            1.Vue中常用的按键别名（牢牢掌握）：
                回车 => enter
                删除 => delete (捕获“删除”和“退格”键)
                退出 => esc
                空格 => space
                换行 => tab（必须配	合keydown才有效果）
                上 => up
                下 => down
                左 => left
                右 => right
			2.备注：也可以使用keyCode去指定具体的按键（不太推荐）
		 -->

            <!-- TODO:
              如果用了封装组件的话，比如Element-ui，使用按键修饰符需要加上.native
              例如 <el-input
                    v-model.trim="searchForm.id"
                    size="medium"
                    placeholder="请输入渠道编号"
                    clearable
                    @keyup.enter.native="$refs.tableSys.handleSearch()"
                  />
             -->

            <input type="text" placeholder="按下回车提示输入" @keyup.enter="keyModifier"/><br />
            <input type="text" placeholder="按下回车提示输入" @keyup.13="keyModifier"/><br />
            <input type="text" placeholder="按下删除提示输入" @keyup.delete="keyModifier"/><br />
            <input type="text" placeholder="按下esc提示输入" @keyup.esc="keyModifier"/><br />
            <input type="text" placeholder="按下空格提示输入" @keyup.space="keyModifier"/><br />
            <input type="text" placeholder="按下tab提示输入" @keyup.tab="keyModifier"/><br />
            <input type="text" placeholder="按下↓提示输入" @keyup.down="keyModifier"/><br />
            <input type="text" placeholder="按下w提示输入" @keyup.w="keyModifier"/><br />
            <input type="text" placeholder="按下alt+c提示输入" @keyup.alt.67="keyModifier"/>
            <input type="text" placeholder="按下alt+c提示输入" @keyup.alt.c="keyModifier"/>
        </div>

        <script>
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                methods: {
                    keyModifier() {
                        console.log(event.target.value);
                    },
                },
            });
        </script>
    </body>
</html>

babywenever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
键盘事件修饰符

备注：也可以使用keyCode去指定具体的按键（不太推荐）@keyup.alt.c：按下alt+c触发。@keyup.delete：按下删除触发。@keyup.enter：按下回车触发。@keyup.space：按下空格触发。@keyup.down：按下 ↓ 触发。@keyup.esc：按下esc触发。@keyup.tab：按下tab触发。@keyup.w：按下w触发。
复制链接

扫一扫