vue中@keyup.enter失效问题及解决

目录
  • @keyup.enter失效问题
    • 情况一（我遇到的情况）
    • 情况二（百度时了解到的）
  • @keyup.enter和@blur触发两次和回车无效
    • 1.vue 对 input 绑定两个事件：回车或失焦
    • 2.解决: 键盘按下 Enter 键执行 blur

@keyup.enter失效问题

情况一（我遇到的情况）

@keyup.enter外部存在form表单，并且form表单里只有一个input

原因：当form表单内只有一个input按回车键会自动提交表单

解决办法：多增加一个不可见的input即可

情况二（百度时了解到的）

在同一个标签同时添加@click和@keyup.enter

解决办法：分开放，比如@keyup.enter通常放在input里面，@click放在button里面

@keyup.enter和@blur触发两次和回车无效

1.vue 对 input 绑定两个事件：回车或失焦

<input
   v-else
   ref="input"
   v-model="inputValue"
   type="text"
   :placeholder="placeholder"
   @keyup="save"
   @blur="save"
 />
save(e) {
  console.log(e)   // 可以打印出事件的内容
  if (e.keyCode === 13 || e.type === 'blur') {
    this.pShow = !this.pShow
    this.$emit('update', this.$attrs['step-index'], this.inputValue)
  }
}

要求 input 框失焦或者键盘按下 Enter 键时触发 save 事件，但是实际上在按下 Enter 键后，会触发两次save 事件

原因：键盘按下 Enter 键执行 save 方法同时会自动触发 blur事件，导致 save 被执行了两次

2.解决: 键盘按下 Enter 键执行 blur

<input
   v-else
   ref="input"
   v-model="inputValue"
   type="text"
   :placeholder="placeholder"
   @keyup.enter.native="$event.target.blur"
   @blur="save"
 />

2.问题：按下 Enter 并不能触发事件

需要将 @keyup.enter.native="$event.target.blur" 改成 @keyup.enter="$event.target.blur" , 如果 input 是 el-input 可以用第一个方法

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现给div绑定keyup的enter事件

    摘要:发现给div绑定keyup.enter事件是没有效果的.那该如何实现呢?下面直接上代码吧 1.在template中代码 2.在created的生命周期中,写一个全局的enter事件 这样按下键盘中的enter事件就是有效的了 补充知识: vue给div绑定keyup的enter事件实现接电话(结合阿里云软电话SDK) 摘要:之前我们的接入的阿里云软电话SDK的功能,现在有个新的需求就是我们自己的弹窗中添加一个按钮可以接听电话,同时可以按键盘的Enter键接电话.(这里的很多废话,是为了记录

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet

  • Vue中keyup.enter和blur事件冲突的问题及解决

    目录 keyup.enter和blur事件冲突问题 解决方法 keyup.enter和blur同时触发如何规避 问题描述 实现代码 解决办法 keyup.enter和blur事件冲突问题 <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" :ref="$index" size="small"

  • vue中使用/deep/失效的解决方法

    1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器 <style scoped> .box >>> el.dialog { } </style> 2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep <style scoped lang="scss"> .box /deep/ el.dialog { }

  • vue中touch和click共存的解决方式

    在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent.注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生. touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发 产生冲突的原因 我们可以

  • 在vue中使用console.log无效的解决

    webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧. 补充知识:vue中 :style 与 :class 三元运算符使用 style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8

  • webstorm和.vue中es6语法报错的解决方法

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html

  • vue动画打包后失效问题的解决方法

    webpack 打包后动画未执行, 就是npm run build后在dist中生成的项目中动画未生效 解决: 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图 下面看下vue-cli 打包后自定义动画未执行的解决方法 在vue项目中,想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行,就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0;

  • 关于shiro中部分SpringCache失效问题的解决方法

    关于shiro中部分SpringCache失效问题的解决方法

    1.问题抛出 今天在做Springboot和shiro集成时,发现一个严重的问题.部分service的缓存和事务失效,debug代码时,发现这些有问题的service实例都不是代理生成的,所以事务和缓存就失效了(事务和缓存依赖代理类实现).继续查问题,发现这些有问题的service全部被shiro的realm所依赖,所以怀疑是shiro影响了 所以做一下测试: shiro中用到的ResourceService public class LocalRealmService extends Real

  • Vue中使用stylus报错的解决

    Vue中使用stylus报错的解决

    目录 一.正常配置stylus流程 二.解决bug 一.正常配置stylus流程 1.安装stylus.stylus-loader依赖(进入项目文件夹下) cnpm install stylus stylus-loader 2.package.json文件配置(手动添加依赖) "devDependencies": { ... "stylus": "^0.54.8", "stylus-loader": "^3.0.2&

  • 详解vue中引入stylus及报错解决方法

    详解vue中引入stylus及报错解决方法

    前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html 安装stylus 好了,建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在.vue文件的style块中使用,一种是引用.styl文件的形式 在.vue文件的style块中使用 这个很简单,只要

  • vue中this.$refs的坑及解决

    vue中this.$refs的坑及解决

    目录 vue this.$refs的坑 以下三点小坑坑 vue的坑 this.refs为空 总结来说 vue this.$refs的坑 在开发中,有时需要使用到this.$refs ,用于操作真实的DOM节点. 说一说我在使用的时候,在开发时碰到了一个小需求,需要子组件向父组件传参,而且是不需要通过事件传递的,一开始使用this.$emit()来写的,但是一直没有接受到参数,于是放弃了使用this.$emit()的使用. 于是,使用了在父组件中调用子组件的方法,来获取传递的参数.但是还是没有获取

随机推荐