جافاسكريبت - التعامل مع مفتاح Enter في Vue.js

لدي حقل نص وزر.
بشكل افتراضي، هذا الزر يقدم نموذجًا عندما يضغط شخص ما على مفتاح 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 على الأقل أولاً حتى أتمكن من التقاطها. لكن، لا يبدو أن ذلك يحدث.
ما الخطأ الذي أفعله؟

الإجابة رقم 1

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

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

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

الإجابة رقم 2

معدلات الحدث

يمكنك الرجوع إلى معدِّلات الأحداث في Vue.js لمنع إرسال النموذج عند الضغط على مفتاح 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/[email /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>

الإجابة رقم 3

للتعامل مع حدث الإدخال يمكنك استخدام

1. @keyup.enter أو

2. @keyup.13

13 هو رمز المفتاح لزر الإدخال. بالنسبة لحدث مفتاح @، فإن رمز المفتاح هو 50. لذلك يمكنك استخدام @keyup.50.

على سبيل المثال:

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

الإجابة رقم 4

هذا الحدث يعمل بالنسبة لي:

@keyup.enter.native="onEnter".

الإجابة رقم 5

لقد نسيت وجود '}' قبل السطر الأخير (لإغلاق 'methods {...').

هذا الكود يعمل :

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>

الإجابة رقم 6

يمكنك أيضًا تمرير الأحداث إلى المكونات الفرعية باستخدام شيء مثل هذا:

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

هذا يعمل بشكل جيد إذا كان لديك مكون تمرير وتريد أن يذهب المستمعون إلى عنصر محدد.

الإجابة رقم 7

فيو 3

في Vue 3، يعمل هذا الكود إذا كنت تريد الاستماع لحدث الإدخال enter:

<input @keyup.enter="onPressEnter" />

أو ربما تريد أن يتم تفعيل الحدث الخاص بك عند ضغط المفتاح، بدلاً من عند تحريره:

<input @keydown.enter="onPressEnter" />