0
I have a responsive site with INPUT’s and SELECT’s items, but by browsing Chrome Android , by the GO KEY key on the virtual keyboard, when I’m focusing on an item, and the next navigation item is a type <select>, it skips this item and always goes to the next INPUT type element.
Have some way to respect the Desktop navigation sequence on mobile, and navigate through the elements <select>.
Att.
1
I don’t have a test environment here to see how this option works, but sometimes it can work there with you.
You can force the order of "tabs" between the fields using the tabindex guy tabindex="1" tabindex="2" tabindex="3" etc. But as I said I don’t have an environment to do the test, although I believe it should work on mobile.
See that:
The global attribute
tabindexindicates whether an element can receive focus input (if it is focusable), if and in which position it should make part of sequential keyboard navigation (usually with the Tab key, hence your name).
Here’s the Mozilla documentation on tabindex: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
Practical example for you to test if it works:
<input tabindex="1" type="text" name="" id="">
<select tabindex="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input tabindex="3" type="text" name="" id="">
<select tabindex="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>That’s right, I was doing a search to see if the behavior was the same as tab
@Leandroangelo I imagine it is. I just don’t have an environment to do the test unfortunately. But it’s a tip that can sometimes solve
All of a sudden there’s some bug in the <select> for the native UI and it does not do Focus, but also I have no way to test here
My main question is whether when you do Focus on <select> the next tab would be in the first <option> or in the next input... Let’s see the auq the author of the question will say rss
I tested the Tabindex alternative, but it didn’t work either, so I put together a page with the code above to test: link I’m using Android Phone , On the cell phone it jumps from tabindex=1 to tabindex=4 , which is the next INPUT.
@user125144 Guy unfortunately tested here with your link and did not roll on my Android. The tips now are to look for a form from another site that has a Select accessible by "forward" and do a reverse engineering, or else Block the fields with JS and release them in the order you want, indicating what the next field to be filled understands.
Browser other questions tagged html css html5
You are not signed in. Login or sign up in order to post.
go key, vc refers to "next"?
– Leandro Angelo
That, the green arrow to the right on the keyboard corner.
– user125144
To understand the problem I created this page link , with an input , a select, another input and another select... instead of navigating from the first input to the first select, it jumps to INPUT, even using TABINDEX, I believe it is a standard behavior of the mobile interface, but I don’t know what the alternative is to make the user respect the form input sequence.
– user125144