Обработка клавиши Enter в Vue.JS

Обработка клавиши Enter в Vue.JS

22.03.2017 03:42:41 Просмотров 111 Источник

Я изучаю вю.JS. В моем Vue есть текстовое поле и кнопка. По умолчанию эта кнопка отправляет форму, когда кто-то нажимает клавишу Enter на клавиатуре. Когда кто-то набирает текст в текстовом поле, я хочу запечатлеть каждую нажатую клавишу. Если ключ является символом"@", я хочу сделать что-то особенное. Если нажата клавиша "Enter", я тоже хочу сделать что-то особенное. Последний-это тот, кто бросает мне вызов. В настоящее время у меня есть эта скрипка , которая включает в себя этот код:

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, что функция validateEmailAddress по крайней мере сработает первой, чтобы я мог ее захватить. Но, похоже, этого не происходит. Что я делаю не так?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/42951967/handling-enter-key-in-vue-js#comment72999910_42951967
Я не вижу никакой формы в твоей скрипке?

Ответы - Обработка клавиши Enter в Vue.JS / Handling Enter Key in Vue.js

Является ответом!
Amresh Venugopal

22.03.2017 04:12:29

Модификаторы Событий

Вы можете обратиться к модификаторам событий в vuejs, чтобы предотвратить отправку формы по enterили event.preventDefault()внутри обработчиков событий.

Хотя мы можем легко сделать это внутри методов, было бы лучше, если бы методы могли быть чисто о логике данных, а не иметь дело с деталями событий DOM.

Для решения этой проблемы Vue предоставляет модификаторы событий для event.stopPropagation(). Напомним, что модификаторы-это директивные постфиксы, обозначаемые точкой.

v-on

Как говорится в документации, это синтаксический сахар для <form v-on:submit.prevent="<method>"> ... </form> и остановит нежелательную отправку формы при нажатии клавиши enter.

Вот вам и рабочая скрипка.

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

Happyriwan

22.03.2017 04:13:47

Вы забываете '}' перед последней строкой (чтобы закрыть " методы {...").

Этот код работает :

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>

fitorec

28.05.2018 07:38:02

В vue 2 Вы можете поймать событие enter с v-on:keyup.enter Регистрация документации:

https://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"></script>

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

Удачи

https://stackoverflow.com/questions/42951967/handling-enter-key-in-vue-js/50559196#comment101592394_50559196
Это дало мне нужный намек. С Buefy мне нужно было добавить native для b-input: v-on:keyup.native.enter="onEnter"
https://stackoverflow.com/questions/42951967/handling-enter-key-in-vue-js/50559196#comment105098094_50559196
Вы также можете использовать @keyup.введите="сделать"
Nuno Ribeiro

04.01.2019 06:27:42

Это событие работает на меня:

@keyup.enter.native="onEnter".
ShaSha

26.12.2019 09:50:45

простой способ:

@keyup.enter="method"
Закрыть X