ChatGPT解决这个技术问题 Extra ChatGPT

处理 Vue.js 中的 Enter 键

我正在学习 Vue.js。在我的 Vue 中,我有一个文本字段和一个按钮。默认情况下,当有人按下键盘上的 Enter 键时,此按钮会提交表单。当有人在文本字段中输入时,我想捕获每个按下的键。如果键是'@'符号,我想做一些特别的事情。如果按下的键是“Enter”键,我也想做一些特别的事情。后者给我带来了挑战。目前,我有这个 Fiddle,其中包括以下代码:

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';
    }
});

在我的示例中,如果不提交表单,我似乎无法按“Enter”键。但是,我希望 validateEmailAddress 函数至少首先触发,以便我可以捕获它。但是,这似乎并没有发生。我究竟做错了什么?

我在你的小提琴中看不到任何形式?

f
fitorec

在 vue 2 中,您可以使用 v-on:keyup.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'; } } });

{{ msg }}

祝你好运


这给了我需要的提示。使用 Buefy,我需要为 b 输入添加原生:v-on:keyup.native.enter="onEnter"
您也可以使用 @keyup.enter="doSomething"
v-on:keyup.native.enter="onEnter" 仅对不在按钮上的组件有效。
我们是否总是需要输入来检测按键?我正在尝试使用箭头和 esc 键(全屏时)控制 Buefy 轮播。
buefy 输入和 chrome 我需要 @keydown.enter.native="doSomething" github.com/bootstrap-vue/bootstrap-vue/issues/…
t
tony19

事件修饰符

您可以参考 vuejs 中的 event modifiers 以防止在 enter 键上提交表单。

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

虽然我们可以在方法内部轻松地做到这一点,但如果方法可以纯粹是关于数据逻辑而不是处理 DOM 事件细节会更好。

为了解决这个问题,Vue 为 v-on 提供了事件修饰符。回想一下,修饰符是用点表示的指令后缀。

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

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

Here 是一个工作小提琴。

new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter被按下'); } else if (e.keyCode === 50) { alert('@被按下'); } this.log += e.key; }, postEmailAddress: function() { this.log += '\n\nPosting'; }, noop () { // 什么都不做 ? } } }) html, body, #editor { margin: 0;高度:100%;颜色:#333; }




我必须将其修改为 `@keyup.native="validateEmailAddress" 才能与我在 vue-cli 3 中的设置一起使用
N
Nuno Ribeiro

这个活动对我有用:

@keyup.enter.native="onEnter".

R
Rahul TP

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

@keyup.enter 或 @keyup.13

13是回车键码。对于@key 事件,keycode 是 50。所以你可以使用 @keyup.50

例如:

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

是否有列出字符和数字之间映射的网站(如 50 和 @)?我在 Vue 文档中找不到它。
我可以使用多个键吗? @keydown.1.2 之类的东西?
是的,
H
Happyriri

你忘记了最后一行之前的'}'(关闭“方法{...”)。

此代码有效:

Vue.config.keyCodes.atsign = 50; new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { onEnterClick: function() { alert('Enter was pressed'); }, onAtSignClick: function() { alert('@被按下'); }, postEmailAddress: function() { this.log += '\n\nPosting'; } } }) html, body, #editor { margin: 0;高度:100%;颜色:#333; }




是否有列出字符和数字之间映射的网站(如 50 和 @)?我在 Vue 文档中找不到它
a
agm1984

您还可以通过以下方式将事件传递给子组件:

<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>

如果您有一个直通组件并希望侦听器进入特定元素,则此方法效果很好。


m
melvin

您缺少方法的右大括号

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
});