I’ve created a custom form with user input text boxes. However, when I try to tab through each text box in preview/publish it just jumps seemingly randomly from each input.
Literally when I hit the tab key, instead of moving to the next box it will jump to one below or above or the URL. I have no idea how to fix it?
Anyone else have this issue?
Yes, same here. In other environments, you would be able to set a Tab Index in the element´s properties, but it´s just not there.
Hey,
In order to make sure that your input fields (as part of your entire site) are accessible via keyboard, you need to activate it using the Accessibility dialog.
Please see here for details: Accessibility: Checklist for Improving Your Site's Accessibility | Help Center | Wix.com
Using this, your input fields should be ordered properly and you should be able to see proper visual indicators while tabbing.
Ahh, how simple. This worked. Thanks Ohad!
Enabling the Accessibility does help, but the tab index order is the real issue here. During the design process, it is inevitable to cut, paste, delete, and move the input fields around, so at the end (from the point of view of the Tab Index) the index order is a complete mess, the tab key gives the focus in disarranged way.
The Tab Index should be a Visible Property so we can customize the order of the input fields at the end of the design process.
Agree. There are so many forms that, by client spec, do not follow the top2bottom/left2right paradigm, that you need a tab index, whatever consultants and web consortia say. The argument that a developer can make an error with it is nonsense. With that argument, you should not let him program at all.
Hi Guys,
Tab index is actually a general thing, and not necessarily related to Wix Code.
If you find that important, I suggest adding a feature request through Wix Support .
Liran.
Of course it’s important. When you have to enter data into a lot of fields, you hit tab between each one, you don’t use your mouse, and if the focus shifts to some random field, that’s not good.
Oh man I did everything to get my site rolling but this is such a weird issue.I’m just stuck and helpless here.
Did this ever get added as a feature request? I’d definitely vote for it!
Has anyone got any good answers for how to make this work? I’ve tried everything I could find suggested here (Accessibility turned on, right click and Bring to Front twice on each field in order) nothing seems to fix this problem! Any help would be greatly appreciated!!
Yes. Don’t use Wix. There are so many better things out there. Wix is incredibly
@mike-donovan Incredibly what? Your message appears to have been cut off. What do you recommend instead? With a couple of exceptions, WIX has been fairly easy to use so far.
Hi everyone. I’ve been searching for an answer to this as well and finally found it, thanks to the developers at wixcreate . com. Here’s the solution! https://www . wixcreate . com / using-tab-to-move-to-next-field
In case that page is not found at some point, here are the simple steps. It might look complicated but I just went into precise detail. It’s easy. 
Make sure you are in Dev Mode in the Wix editor, and open your page with the form
Bring up “Tools > Properties Panel”
Expand your Page Code at the bottom of your window. You should see default code at the beginning, such as:
export function input1_viewportEnter(event) {
// Add your code for this event here:
}
After the last “}”, I added the following so I remembered later what I added:
// MJS added the following code to sort the tab order of fields
Click on your first form field. In the Properties panel, click the “+” sign next to “onKeyPress” and hit “Enter” on your keyboard. You will see “IDfield1_keyPress” (where “IDfield1” should be set automatically to be the ID of your field). You can also see the field ID above the field when it’s selected. AND in your Page Code, the following will automatically be entered (using IDfield1 in this example):
export function IDfield1_keyPress(event) {
// Add your code for this event here:
}
Add a blank line between “// Add your code for this event here:” and the last “}” so it looks like this:
export function IDfield1_keyPress(event) {
// Add your code for this event here:
}
if (event.key === ‘Tab’ ) {
$w( “#IDfield2” ).focus();}
Yay! Good tabbing! And THANK YOU, wixcreate . com!
Thanks for this, it does work but before it focuses on the input you tell it to, it focuses on the default field for like a millisecond and causes it to show “not filled” error(red borders and such)
Hi Mikheil, I noticed something like that happening but did not attribute it to the tabbing code…but if that is the case, then maybe that explains why I keep getting an error saying I left a required field empty when I didn’t?
According to this thread
https://community.wix.com/velo/forum/coding-with-velo/tabindex/p-1~o
There used to be a feature request already in 2018, but the link is now dead.
I can’t find a way to file a feature request myself, it’s too much hassle since they knew about this issue 5 years ago.
tabindex is a necessity for accessibility and proper ux design.
Ronald, it has been solved a long time ago. In the (classic)editor, click on Tools in right upper corner, then check Layers. Now you see a box with all (input) elements. Now your can drag and drop them in a vertical order, which will also govern the tab order. Veel plezier.