Since browsers have integrated tabs, we all use the tab key to change tabs.

Why not have the same functionality in a K2 form?

This is a nice feature, to implement by using the following Javascript code :

[pastacode lang=”javascript” manual=”function%20checkTabPress(e)%20%7B%20%0A%09%22use%20strict%22%3B%20%0A%20%09e%20%3D%20e%20%7C%7C%20event%3B%20%0A%20%09var%20activeElement%3B%20%0A%09if%20(e.keyCode%20%3D%3D%209)%20%7B%20%0A%09%09%2F%2F%20tabulation%20pressed%0A%09%09if(%24(%22.tab.selected%22).closest(‘li’).nextAll(‘%3Ahas(.tab)%3Afirst’).html()%20%3D%3D%20null)%0A%09%09%7B%09%2F%2F%20we%20are%20on%20the%20last%20tab%2C%20so%20we%20go%20back%20on%20the%20first%20one%0A%09%09%09console.log(‘first%20tab’)%3B%09%0A%09%09%09%24(‘.tab%3Afirst’).click()%3B%09%0A%09%09%7D%09%0A%09%09else%09%0A%09%09%7B%09%0A%09%09%09%2F%2F%20Select%20next%20tab%0A%09%09%09console.log(‘next%20tab’)%3B%09%0A%09%09%09%24(%22.tab.selected%22).closest(‘li’).nextAll(‘%3Ahas(.tab)%3Afirst’).find(‘.tab’).click()%3B%09%0A%09%09%7D%09%0A%09%7D%0A%7D%0A%0A%2F%2F%20We%20attach%20the%20checkTabPress%20function%20to%20the%20%22keyup%22%20event%0Avar%20body%20%3D%20document.querySelector(‘body’)%3Bbody.addEventListener(‘keyup’%2C%20checkTabPress)%3B” message=”Javascript à ajouter a notre formulaire” highlight=”” provider=”manual”/]

Once the Javascript has been added to your form, you just have to run the form and play with the tab key.

 

Enjoy  😎