vue键盘事件不生效 - 简书

很多刚开始使用v-on的键盘事件时，经常会碰到明明添加了@keyup.按键名/值，却没有起作用，（小鸡不尿尿，各有各的道），其实不是没有起作用，而是元素没有获取焦点导致的。

一、v-on 在监听键盘事件时，如果元素没有获取焦点，keyup事件无法生效

比如把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件。点击之后，焦点就在按钮上，所以这时按空格键有效。

解决办法一: 按钮添加自定义指令(获取焦点)，添加事件修饰符，ok搞定
  • js:
    directives: {
    focus: {
    // 指令的定义
    inserted: function(el) {
    el.focus();
    }
    }
    }
  • html:
    <button v-focus @keyup.enter="login" >登 录</button>
解决办法二：把事件绑定到父元素（外框）
<div @keyup.enter="login">
<input type="text">
</div>

二、例子：实现点击按键enter进行登录

思路：

<div @keyup.enter="login">
<input type="text" placeholder="手机号码">
<input type="text" placeholder="密码">
<button v-focus @click.stop="login">登录</button>
</div>

image.png

原网址: 访问
创建于: 2018-10-13 21:06:01
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论