[iOS/Safari] Input focus activeren werkt niet*

[osorkon!]

Ik weet dat got geen helpdesk is maar zit met een raar probleem waar ik niet aan uitkom.

Volgende situatie werkt niet goed op iOS (iPad) in safari. Op elke andere machine en browser geen probleem.

HTML:

1. <input type="text" id="focus_1" />
<input type="button" value="Focus 2" onclick="$('#focus_2').focus()" />
2. <input type="text" id="focus_2" />
<input type="button" value="Focus 1" onclick="$('#focus_1').focus()" />

Ik maak gebruik van jQuery. De bedoeling is dat als we op knop "Focus 2" klikken element #focus_2 de focus krijgt en omgekeerd. De 1ste maal dat ik klik werkt dit perfect, druk ik vervolgens op knop "Focus 1" wordt element #focus_1 niet geselecteerd. De code werkt wel onder windows en in IE, FF, Chrome..

Update: zelfde code hierin http://jsfiddle.net/kReM7/ werkt wel, dus moet iets anders binnen men web pagina de actie tegenhouden.

[ Voor 11% gewijzigd door osorkon! op 28-03-2012 15:56 ]

[Bosmonster]

iOS blokkeert dit opzettelijk voor programmatische events, aangezien de focus ook direct het toetsenbord opent. Zie het als een soort popup-blocker.

Edit: waarschijnlijk blokkeert jQuery hierdoor de boel, aangezien het om een user generated event gaat (als het niet de eerste call in de stack is dan ziet ie het als programmatisch volgens mij). Mogelijk werkt het wel als je direct getElementById gebruikt in de onclick.

[ Voor 62% gewijzigd door Bosmonster op 28-03-2012 16:24 ]

[osorkon!]

Kan je dit op 1 of andere manier omzeilen?

Bosmonster schreef op woensdag 28 maart 2012 @ 16:20:
iOS blokkeert dit opzettelijk voor programmatische events, aangezien de focus ook direct het toetsenbord opent. Zie het als een soort popup-blocker.

Edit: waarschijnlijk blokkeert jQuery hierdoor de boel, aangezien het om een user generated event gaat (als het niet de eerste call in de stack is dan ziet ie het als programmatisch volgens mij). Mogelijk werkt het wel als je direct getElementById gebruikt in de onclick.

[MueR]

Nee. Dit soort blokkades zijn er met goede redenen in gezet. Mocht je toch een manier vinden is het waarschijnlijk een bug en kan je er van uit gaan dat dit gepatched gaat worden.

[BtM909]

osorkon! schreef op woensdag 28 maart 2012 @ 16:42:
Kan je dit op 1 of andere manier omzeilen?


[...]

Ik zou zeggen probeer de mogelijkheid van Bosmonster eens

[_Thanatos_]

Gebruik een <label>

[osorkon!]

_Thanatos_ schreef op donderdag 29 maart 2012 @ 01:38:
Gebruik een <label>

Natuurlijk gebruik ik deze functionaliteit niet zo, kan moeilijk een hele wegpagina met scripts tonen. Het komt er op neer dat als een gebruiker een formulier invult en op een knop drukt hij naar een volgend formulier moet gaan en direct de focus zetten op het eerste element hierin.

getElementById lost het probleem niet op, dus het zal waarschijnlijk niet aan jQuery liggen. Ik zou een veilige functie moeten hebben/schrijven dat een element altijd focus kan krijgen, gelijk in welke browser.

[Bosmonster]

osorkon! schreef op donderdag 29 maart 2012 @ 08:09:
[...]

getElementById lost het probleem niet op, dus het zal waarschijnlijk niet aan jQuery liggen. Ik zou een veilige functie moeten hebben/schrijven dat een element altijd focus kan krijgen, gelijk in welke browser.

Dat moet je denk ik sowieso uit je hoofd zetten. De interactie en verwachtingen op mobiel liggen heel anders dan op een desktop.

Automatische focus op elementen heeft veel meer gevolgen op mobiel bijvoorbeeld en doordat het zoveel beperkingen heeft ligt het ook helemaal niet in het verwachtingspatroon van de gebruiker.

Die hele restrictie die Apple ingebouwd heeft is om de gebruikservaring (en de verwachtingen dus) consistent te houden en de kwaliteit te waarborgen, ongeacht de kennis en kunde van de developer of designer.

[ Voor 13% gewijzigd door Bosmonster op 29-03-2012 10:12 ]

[_Thanatos_]

osorkon! schreef op donderdag 29 maart 2012 @ 08:09:
[...]
Natuurlijk gebruik ik deze functionaliteit niet zo, kan moeilijk een hele wegpagina met scripts tonen. Het komt er op neer dat als een gebruiker een formulier invult en op een knop drukt hij naar een volgend formulier moet gaan en direct de focus zetten op het eerste element hierin.

In dat geval: http://www.html5tutorial.info/html5-autofocus.php

[osorkon!]

iOS geeft geen support voor autofocus

[samo]

osorkon! schreef op donderdag 29 maart 2012 @ 13:32:
iOS geeft geen support voor autofocus

... en zoals eerder aangegeven is dat maar goed ook. Het toetsenbord neemt de helft van je scherm in beslag, en dan is het meteen praktisch onmogelijk om te zien wat de context van jouw invoer is. Hoe ver ben je en hoeveel moet je nog. Door op de iPhone eerst alles te laten zien kan je veel beter de verwachtingen managen.

Mocht je enorm overtuigd zijn van je eigen gelijk, kan je altijd zelf een keyboard gaan maken en deze standaard tonen.

[osorkon!]

Geef jullie allemaal gelijk heb het idee dan ook laten varen voorlopig, het is gewoon als je bvb een pagina hebt voor te registreren met 2 velden (username + email), is het ook logisch dat je direct kan beginnen typen omdat dit zowieso de bedoeling is.

UX matters..

[Bosmonster]

Het is alleen op een klein schermpje heel onduidelijk welk invoerveld nu eigenlijk focus heeft. Het automatisch gaan veranderen van de focus gaat dus juist alleen maar verwarring veroorzaken, ook omdat er geen tab-functie is om naar een volgend veld te gaan.

UX matters indeed

[osorkon!]

Bosmonster schreef op donderdag 29 maart 2012 @ 14:07:
Het is alleen op een klein schermpje heel onduidelijk welk invoerveld nu eigenlijk focus heeft. Het automatisch gaan veranderen van de focus gaat dus juist alleen maar verwarring veroorzaken, ook omdat er geen tab-functie is om naar een volgend veld te gaan.

UX matters indeed

Dit kan je wel makkelijk opvangen, door het geselecteerde input veld te stylen, en ook het beeld juist te stellen (dit wordt denk ik wel automatisch gedaan door de meeste browsers). Is dus geen argument

[Bosmonster]

osorkon! schreef op donderdag 29 maart 2012 @ 14:09:
[...]


Dit kan je wel makkelijk opvangen, door het geselecteerde input veld te stylen, en ook het beeld juist te stellen (dit wordt denk ik wel automatisch gedaan door de meeste browsers). Is dus geen argument

You are missing the point.

Er is geen tab-knop, dus er is geen knop om naar een volgend veld te springen. Dus wat je kunt doen is dit op enter doen, maar dan submit je het formulier. Of iets geforceerds in het scherm of op basis van user-input. Dit laatste gaat met een username/password alleen niet lukken natuurlijk.

Daarnaast past je viewport zich niet zomaar aan aan je focus. En al zou je dat (wederom geforceerd) doen, dan krijg je good ol' tunnel visie. Je ziet maar zo'n klein deel van de site dat je de context niet meer weet.

Maar goed.. genoeg argumenten genoemd. Dat jij dat geen argumenten vindt kan ik niet zoveel aan doen.

[ Voor 19% gewijzigd door Bosmonster op 29-03-2012 14:43 ]

[Voutloos]

offtopic:
Weliswaar geen old skool tab, maar er zijn wel vorige/volgende input knoppen. Maar dat doet niets af aan de andere argumenten.

[OkkE]

Wie weet wordt ooit het HTML5 attribute autofocus ondersteund door mobile browsers. Maar dat denk ik -- van wegen o.a. Bosmonster zijn argumenten -- niet.