vue.js中添加enter键盘事件局部使用和全局使用

经常在网站中输入密码之后按enter回车登录如何实现呢?

局部使用

原生js和vue的input版

//js
<input v-on:keyup.13="onSubmit">
//vue
<input @keyup.enter="onSubmit">

如果失效:

//有时候前两种会出现失效,加上 .native 修饰即可
@keyup.enter.native="onSubmit"

示例:(element-ui中具体使用)

// 在组件中使用的示例
// 在局部中定义enter事件只有鼠标位于输入框中才能按下enter键触发事件
 <el-form-item>
 	<el-input @keyup.enter.native="onSubmit" type="password" v-model="form.password" placeholder="用户密码" prefix-icon="el-icon-lock"></el-input>
	<el-link type="info" :underline="false" @click="findPassword">忘记密码?</el-link>
</el-form-item>

全局使用

整个页面中生效

// vue中使用
// 只需要将下方注释的触发事件处的事件改为你想使用enter触发事件的函数名即可
created () {
    var that = this
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        that.onSubmit() // 触发事件
      }
    }
  },

版权声明:本文为qq_44774831原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。