Estoy desarrollando una aplicación web usando Vue.js. Tengo un formulario de entrada de datos con 5 campos. La necesidad comercial está en la pulsación de tecla de pestaña, debe enfocarse en el primer cuadro de entrada y en las pestañas posteriores debe enfocarse el siguiente elemento siguiente. He archivado usando la propiedad tabindex para los elementos.
Ahora, el problema al que me enfrento es después de que terminan los elementos del formulario y cuando presionamos la pestaña, va a los otros elementos donde tabindex no está definido, como los enlaces y la barra de URL de los navegadores.
Lo que quiero es que si tengo 6 elementos (5 cuadros de texto + 1 botón de envío) y configuré tabindex de 1 a 6 que nuevamente después de la pestaña en el elemento con tabindex 6, debería enfocarse nuevamente en tabindex 1 e ignorar otros enlaces y botones en la página web .
Puede enfocar elementos sin el uso de tabindex .
Vue.js permite seleccionar elementos DOM con este tipo de sintaxis this.$refs.name (y si no funciona, puede probar this.$el.querySelector('yourElementSelector')
Después de seleccionar el elemento, puede agregarle focus() . Por ejemplo, this.$refs.name.focus() ;
En su caso específico, puede agregar this.$refs.name.focus() después de un evento onclick en la pestaña.
Eso enfocará el elemento justo después del clic.
Puede evitar el foco fuera de tabIndex un espacio vacío al final del último elemento de índice. Déle una id con tabindex = 0 junto con un evento onfocus . Al activarlo, ayuda a enfocarse en el primer elemento tabindex .
<span tabindex="0" id="prevent-outside-focus" onfocus="foucsFirstTabIndex()"></span>Demostración en vivo :
new Vue({ el: '#app', mounted() { document.getElementById('field1').focus(); }, methods: { foucsFirstTabIndex() { document.getElementById("field1").focus(); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" id="field1" tabindex="1"/><br> <input type="text" id="field2" tabindex="2"/><br> <input type="text" id="field3" tabindex="3"/><br> <input type="text" id="field4" tabindex="4"/><br> <button id="button" tabindex="5">Submit</button> <span tabindex="0" id="prevent-outside-focus" @focus="foucsFirstTabIndex()"></span> </div>FYI: esta es la respuesta de Vue 2 de @RohitJindal usando la API de composición de Vue 3
Modificado para que shift-tab en el primer elemento se mueva al último
Nota: deberá volver a numerar sus tabindexes si desea hacerlo así
const { createApp, onMounted } = Vue; createApp({ setup() { const focusFirst = () => { document.querySelector('[tabindex="2"]').focus(); } const focusLast = () => { document.querySelector('[tabindex="6"]').focus(); } onMounted(focusFirst); return { focusFirst, focusLast}; } }).mount('#app'); <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script> <div id="app"> <span tabindex="1" @focus="focusLast"></span> <input type="text" tabindex="2"/><br> <input type="text" tabindex="3"/><br> <input type="text" tabindex="4"/><br> <input type="text" tabindex="5"/><br> <button id="button" tabindex="6">Submit</button> <span tabindex="7" @focus="focusFirst"></span> </div>