2

estoy desarrollando un sistema en donde necesito acelerar un proceso de venta para el usuario mediante accesos rápidos con el teclado. Lo que quiero hacer es que cuando el usuario presione por ejemplo F2, sea como que le dio click a un button. Lo logre con la tecla

<input type="text" 
       class="form-control" 
       v-model="codigo" 
       @keyup.enter="buscarArticulo()" 
       placeholder="Ingrese artículo">

Un ejemplo de como quiero que quede seria esto

<button @keyup.F2="abrirModal()" class="btn btn-primary">...</button>

por así decirlo

1 respuesta 1

2

El key code que estas buscando, es el 113.

O sea que tu input se puede escribir de la siguiente manera, segun el manual de vue

<input type="text" 
   class="form-control" 
   v-model="codigo" 
   @keyup.keyCodes.113="buscarArticulo()" 
   placeholder="Ingrese artículo">

Para poder escribirlo como escribiste tu primer input, tenemos que decirle a vue que existe este keycode, y ponerle un nombre. Para ello, vue nos facilita unir las keycode a algo que recordemos facilmente.

Al crear tu instancia de vue puedes hacer lo siguiente

// Permite `v-on:keyup.f2`
Vue.config.keyCodes.f2 = 113

Y luego, escribis tu input usando el nombre:

<input type="text" 
   class="form-control" 
   v-model="codigo" 
   @keyup.f2="buscarArticulo()" 
   placeholder="Ingrese artículo">
7
  • Muchas gracias por tu respuesta.. me ayudo mucho a entender como trabajar con esto ! el 25 ene. 2019 a las 14:22
  • Esto como puedo hacer para que "@keyup.f2" sea replicable a un button? el 25 ene. 2019 a las 14:28
  • No entiendo.. al hacer el keyup podes ejecutar cualquier metodo. inclusive el mismo metodo que ejecuta el boton... @HernanChaparro
    – gbianchi
    el 25 ene. 2019 a las 14:29
  • Esto por ejemplo no me funciona... "<button @keyup.keyCodes.113="abrirModal()" class="btn btn-primary">...</button>" pero si lo pongo como un input si.. el 25 ene. 2019 a las 14:30
  • Porque no existe un keyup en un boton. Los botones no reciben eventos keyup.. solo reciben enter en un keypress... eso no es un problema de vue, es un problema de comportamiento de controles. @HernanChaparro. Tenes que leer el f2 de forma global, no en el boton
    – gbianchi
    el 25 ene. 2019 a las 14:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.