nicht angemeldet
Tablets und :focus bei [tabindex=0]
suitHi,
ich habe in meinem HTML-Dokument ein li-Element mit 'tabindex="0"'.
Per CSS wird dieses bei :focus anders gestylet.
Auf Desktop-Browsern funktioniert das, mitm Safari aufm iPad nicht.
Mache ich etwas falsch?
Weiß jemand einen anderen Weg, ein beliebiges Element fokusierbar zu machen?
~dave
-
مرحبا
Auf Desktop-Browsern funktioniert das, mitm Safari aufm iPad nicht.
Ich habe kein iPad, wie genau fokussierst du damit? Das ding hat doch keine Tastatur?
mfg
-
Hi,
Auf Desktop-Browsern funktioniert das, mitm Safari aufm iPad nicht.
Ich habe kein iPad, wie genau fokussierst du damit? Das ding hat doch keine Tastatur?
Ich hatte erwartet dass Elemente auch bei einfachem Touch den fokus erhalten.
Bei Input-Elementen ists ja so, und aufm Desktop gehts ja auch mit klick.~dave
-
مرحبا
Ich hatte erwartet dass Elemente auch bei einfachem Touch den fokus erhalten.
Siehe unter Erläuterungen für http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:focus.
In deinem Fall wäre :active (quasi onclick) der gewünschte Zustand.mfg
-
Hi,
Ich hatte erwartet dass Elemente auch bei einfachem Touch den fokus erhalten.
Siehe unter Erläuterungen für http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:focus.
Ich finde nicht was aus dieser Beschreibung mir sagt dass das so wie ich es will nicht gehen kann.
Könntest du mich bitte noch genauer drauf hin stupsen? :D:focus funktioniert zumindest bei input[type=text] anstandslos.
In deinem Fall wäre :active (quasi onclick) der gewünschte Zustand.
Nein, denn :active ist ja nach dem click weg, :focus würde bleiben.
~dave
-
مرحبا
Ich finde nicht was aus dieser Beschreibung mir sagt dass das so wie ich es will nicht gehen kann.
<cite>:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)</cite>:focus funktioniert zumindest bei input[type=text] anstandslos.
Klar, da bleibt der :focus nach dem loslassen ja auch erhalten (der Cursor bleibt im Element und setzt den :focus)
Nein, denn :active ist ja nach dem click weg, :focus würde bleiben.
Stimmt, ich hatte dein Anliegen nicht ganz verstanden. Warum löst du es nicht einfach mit Javascript?
mfg
-
Hi,
Warum löst du es nicht einfach mit Javascript?
Das ist Plan B.
~dave
-
-
-
-
Ich hatte erwartet dass Elemente auch bei einfachem Touch den fokus erhalten.
Afaik wird bei einfachem Touch ein "hover" ausgeführt, außer es sind Formular-Elemente
jsFiddle ist grade tot (504), sonst könnte ich mir das ansehen.
-
Hi,
Ich hatte erwartet dass Elemente auch bei einfachem Touch den fokus erhalten.
Afaik wird bei einfachem Touch ein "hover" ausgeführt, außer es sind Formular-Elemente
<!DOCTYPE html> <title></title> <style>p:focus{background:orange;}p:hover{background:blue;}</style> <p tabindex=0>FooWird bei Touch weder orange noch blau.
Problematisch wäre dann doch auch falls in diesem Element Links wären.~dave
-
<!DOCTYPE html>
<title></title>
<style>p:focus{background:orange;}p:hover{background:blue;}</style>
<p tabindex=0>Foo> > Wird bei Touch weder orange noch blau. Unter iOS-Geräten funktionieren bestimmte Touch-Gesten nur, wenn die Elemente bestimmte CSS-Eigenschaften aufweisen. Gib dem Ding bitte mal `cursor: pointer;`{:.language-css}-
Hi,
Gib dem Ding bitte mal
cursor: pointer;Ändert nichts.
Habe auch gerade nochpointer-events: all;ausprobiert (hauptsächlich weil ich diese Eigenschaft gerade erst entdeckt hatte :D).Unter iOS-Geräten funktionieren bestimmte Touch-Gesten nur, wenn die Elemente bestimmte CSS-Eigenschaften aufweisen.
Weißt du da gerade ein Beispiel?
Oder noch besser eine Seite wo die aufgelistet wären?~dave
-
Weißt du da gerade ein Beispiel?
Apple nennt bestimmte Events "Conditional" - sprich sie treten nur auf, wenn bestimmte Faktoren zutreffen. Wenn du z.B. mit einem Finger auf den Screen tippst und herumziehst, wird das click-Event nicht ausgeführt, weil zuerst mal touchstart und touchmove kommen.
Ein einfaches Beispiel ist eine Drop-Down-Navigation - ein li-Element mit einem a-Element und einem ul-Element drin
<ul> <li> <a href="http://example.com">foo</a> <ul> <li>bar</li> </ul> </li> <ul>li ul { display: none; } li:hover ul { display: block; }Beim ersten antippen wird das ul-Element auf Block gesetzt, beim zweiten tippen wird erst der Link verfolgt.
Wenn du jetzt das a-Element gegen ein span-Element ersetzt, kannst du machen was du willst, das :hover wird nun ignoriert, weil das Event nicht an das li-Element weitergereicht wird - außer du gibst dem span-Element ein cursor: pointer. Aber auch das scheitert ab und zu - hängt wohl von der iOS/Safari-Version ab
Oder noch besser eine Seite wo die aufgelistet wären?
Die Apple-Doku ist ziemlich dünn:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.htmlAber in der jQuery-Doku ist das als Randnotiz erwähnt:
On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements [...]
-
Use natively clickable elements such as a or button, [...]
-
Apply the CSS style cursor:pointer to the element that needs to bubble clicks [...]
Falls die pointer-Lösung nicht funktioniert, gibts nur noch JavaScript als Lösung:
http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/Wie das im Kontext von :focus aussieht, kann ich dir aber nicht beantworten.
-
Hi,
hat mir sehr geholfen, Danke.
~dave
-
-
-
-
-
-
-