Vue.JS Klavye Eventleri

Vue.js'te klavye olaylarını dinlemek için @keydown, @keyup veya @keypress gibi direktifleri kullanabilirsiniz. Bu direktifler, kullanıcının klavyeden bir tuşa basma veya tuşu bırakma gibi eylemlerini dinlemek için kullanılır. İşte bu olayları dinlemek için birkaç örnek:

1. @keydown: Kullanıcının klavyeden bir tuşa bastığında tetiklenir.

   
   
   
   
   <template>
     <div>
       <input type="text" @keydown="handleKeyDown">
     </div>
   </template>
   
   <script>
   
   export default {
     methods: {
       handleKeyDown(event) {
         console.log('Basılan Tuş:', event.key);
       }
     }
   }
   
   </script>
   
   
   
   

2. @keyup: Kullanıcının klavyeden bir tuşu bıraktığında tetiklenir.

   
   
   
   
   <template>
     <div>
       <input type="text" @keyup="handleKeyUp">
     </div>
   </template>
   
   <script>
   
   export default {
     methods: {
       handleKeyUp(event) {
         console.log('Bırakılan Tuş:', event.key);
       }
     }
   }
   
   </script>
   
   
   
   

3. @keypress: Kullanıcının klavyeden bir tuşa basılı tuttuğunda veya bir karakter girdiğinde tetiklenir.

   
   
   
   
   <template>
     <div>
       <input type="text" @keypress="handleKeyPress">
     </div>
   </template>
   
   <script>
   
   export default {
     methods: {
       handleKeyPress(event) {
         console.log('Basılı Tutulan Tuş:', event.key);
       }
     }
   }
   
   </script>
   
   
   
   

Bu örneklerde, @keydown, @keyup ve @keypress direktifleri kullanılarak klavye olayları dinlenir ve bu olaylar tetiklendiğinde belirtilen methodlar çalıştırılır. event parametresi, olayı tetikleyen klavye olayı hakkında bilgi sağlar ve bu bilgileri kullanarak uygun işlemleri gerçekleştirebilirsiniz.