在 Vue.js 中处理输入键

小开

最佳答案

事件修饰符

您可以在 vuejs 中引用事件修饰符，以防止在 enter键上提交表单。

在事件处理程序中调用 event.preventDefault()或 event.stopPropagation()是非常常见的需求。

尽管我们可以在方法内部轻松地完成这项工作，但如果方法能够纯粹关于数据逻辑而不是必须处理 DOM 事件详细信息，那就更好了。

为了解决这个问题，Vue 为 v-on提供了事件修饰符。

<form v-on:submit.prevent="<method>">
...
</form>

如文档所述，这是 e.preventDefault()的语法糖，将在按下回车键时停止不需要的表单提交。

在这里是一个工作小提琴。

new Vue({
el: '#myApp',
data: {
emailAddress: '',
log: ''
},
methods: {
validateEmailAddress: function(e) {
if (e.keyCode === 13) {
alert('Enter was pressed');
} else if (e.keyCode === 50) {
alert('@ was pressed');
}
this.log += e.key;
},
    

postEmailAddress: function() {
this.log += '\n\nPosting';
},
noop () {
// do nothing ?
}
}
})

html, body, #editor {
margin: 0;
height: 100%;
color: #333;
}

<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
<input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
<button type="button" v-on:click="postEmailAddress" >Subscribe</button>
<br /><br />
  

<textarea v-model="log" rows="4"></textarea>
</form>
</div>

小开

在最后一行之前忘记了一个“}”(以关闭“ method { ...”)。

这个代码是有效的:

Vue.config.keyCodes.atsign = 50;


new Vue({
el: '#myApp',
data: {
emailAddress: '',
log: ''
},
methods: {
  

onEnterClick: function() {
alert('Enter was pressed');
},
    

onAtSignClick: function() {
alert('@ was pressed');
},
    

postEmailAddress: function() {
this.log += '\n\nPosting';
}
}
})

html, body, #editor {
margin: 0;
height: 100%;
color: #333;
}

<script src="https://vuejs.org/js/vue.min.js"></script>


<div id="myApp" style="padding:2rem; background-color:#fff;">


<input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  

<button type="button" v-on:click="postEmailAddress" >Subscribe</button>
<br /><br />
  

<textarea v-model="log" rows="4"></textarea>
</div>

小开

在 vue 2中，您可以使用 v-on:keyup.enter捕获 enter 事件，请查看文档:

Https://v2.vuejs.org/v2/guide/events.html#key-modifiers

我留下一个 很简单的例子:

var vm = new Vue({
el: '#app',
data: {msg: ''},
methods: {
onEnter: function() {
this.msg = 'on enter event';
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


<div id="app">
<input v-on:keyup.enter="onEnter" />
<h1>\{\{ msg }}</h1>
</div>

祝你好运

小开

这件事对我很有用:

@keyup.enter.native="onEnter".

小开

对于输入事件处理，可以使用

@keyup.enter或
@keyup.13

13是输入的密码。对于@key 事件，密码是50。所以你可以使用 @keyup.50。

例如:

<input @keyup.50="atPress()" />

小开

您还可以使用类似下面的内容将事件传递到子组件:

<CustomComponent
@keyup.enter="handleKeyUp"
/>

...

<template>
<div>
<input
type="text"
v-on="$listeners"
>
</div>
</template>


<script>
export default {
name: 'CustomComponent',


mounted() {
console.log('listeners', this.$listeners)
},
}
</script>

如果您有一个 pass-through 组件，并希望监听器转到特定元素上，那么这种方法可以很好地工作。

小开

方法缺少一个结束花括号

new Vue({
el: '#myApp',
data: {
emailAddress: '',
log: ''
},
methods: {
validateEmailAddress: function(e) {
if (e.keyCode === 13) {
alert('Enter was pressed');
} else if (e.keyCode === 50) {
alert('@ was pressed');
}
this.log += e.key;
},


postEmailAddress: function() {
this.log += '\n\nPosting';
}
}//add this closing bracket and everything is fine
});

小开

这就是在 Vue3中使用组合 API 编写代码的方法。

<script setup>
function callOnEnter() {
console.log("Enter key pressed");
}
</script>


<template>
<input type="text" @keyup.enter="callOnEnter" />
</template>