Vue学习：键盘事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue学习：键盘事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

input表单占位符-显示输入先的提示文本-placeholder属性

键盘事件@keydown——按下不需要松手 @keyup：按下+松手

根据按键编码进行判断 --输出event上有一个属性-keyCode -按键编码--回车=13

    <!-- 准备容器 -->
    <div id='root'> 
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
    <script>
        new Vue({ 
            el: '#root',
           
            methods: {
                showInfo(e){
                   if(e.keyCode!==13) return
                        console.log(e.target.value)
                }
            },
        });
    </script>

在vue上自带，回车修饰 enter

    <!-- 准备容器 -->
    <div id='root'> 
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script>
        new Vue({ 
            el: '#root',
           
            methods: {
                showInfo(e){
                        console.log(e.target.value)
                }
            },
        });

也就是别名：vue给常用的按键取了别名--一共有9个

回车==>enter

删除==>delete(退格和删除)

退出==>esc

空格==>space

换行==>tab

上==>up

下==>down

左==>left

右==>right

 <input type="text" placeholder="按下回车提示输入" @keyup.delete="showInfo">
    </div>

但是需要新的按键，键盘上任何一个键，都有自己的编码和编号

         methods: {
                showInfo(e){
                        console.log(e.key,e.keyCode)
                }
            },

Vue学习：键盘事件

由两个单词组成的需要：使用小写单词之间使用-连接

        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock ="showInfo">

 <input type="text" placeholder="按下回车提示输入" @keyup.Enter="showInfo">

不是所有的按键都可以绑定事件，有许多按键时识别不到的

当然在vue设置的默认别名中，也有特殊的一些按键，比如tab按键，此按键具有特殊功能切换焦点的作用

   <input type="text" placeholder="按下回车提示输入" @keyup.tab="showInfo">

发现没有触发

焦点的切换-不停的

Vue学习：键盘事件

当按下tab不需要等事件被触发，tab的焦点已经转换了--得使用keydown

    <!-- 准备容器 -->
    <div id='root'> 
        <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">
    </div>

还有一些特殊的修饰键：Ctrl \ alt \ shift \ meta（也即是window键）

用法：
1、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

2、配合keydown使用：正常触发事件

        <input type="text" placeholder="按下回车提示输入" @keyup.meta="showInfo">

使用键码 keyCodes.13 ==回车（不推荐）

   <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">

KeyboardEvent.keyCode - Web API 接口参考 | MDN (mozilla.org)

Vue学习：键盘事件

不同的键盘编码不统一

自己定义别名：Vue.config.keyCodes-也不是很推荐文章来源地址https://www.toymoban.com/news/detail-482755.html

  Vue.config.keyCodes = {
            "a": 13,//13回车按键的别名=a
        };

  Vue.config.keyCodes .a=13;

    <!-- 准备容器 -->
    <div id='root'> 
        <input type="text" placeholder="按下回车提示输入" @keyup.a="showInfo">
    </div>
    <script>
        Vue.config.keyCodes .a=13;
        new Vue({ 
            el: '#root',
           
            methods: {
                showInfo(e){
                        console.log(e.target.value)
                }
            },
        });
    </script>

到了这里，关于Vue学习：键盘事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！