Klick wird von absolut positioniertem Element abgefangen

[Weiße Ziege]

Ich habe das fancy-input-Beispiel Label like Placeholder in eine Webseite eingebaut.

Wenn ich da auf "Name" klicke, dann passiert bei mir aber nichts. Man muss neben das Label, aber noch in das Input-Feld klicken, damit der Fokus dort hineinkommt.

Als ich aber versucht habe, ein Minimalbeispiel zu extrahieren, funktionierte es ganz normal, genau wie in dem Frickl-Beispiel.

Habt ihr eine Idee, warum?

[Weiße Ziege]

Manchmal hat man noch nicht lange genug gegoogelt.

Wenn man

label{pointer-events:none;}

(also zum absolut positionierten Element) zum Stylesheet hinzufügt, geht es.

Und ich vermute jetzt mal, dass, wenn man das nicht macht, die Hierarchie irgendwie festgelegt wird, und dann manchmal das passiert, was man nicht möchte.

[Rolf B]

Hallo Weiße Ziege,

wenn Du uns die Webseite verrätst, auf der Du das eingebaut hast, vielleicht.

Ich hätte aber eine allgemeine Aussage anzubieten. Bei Firefox und Chrome für Windows erlebe ich das Verhalten dieses Beispiels wie folgt:

Der Klick funktioniert nicht, wenn man beim Klicken die Maus nicht stillhält. Wenn man klickt und während der "Button-down" Phase die Maus verschiebt, dann wird der Labeltext markiert und nicht das input-Element aktiviert. Halte ich die Maus still, kann man auch auf den Labeltext klicken, es funktioniert trotzdem. Wie gesagt: mein Erleben. Your Browsage May Vary.

Das Problem haben viele. Klicken und dabei die Maus ruhig halten, den Zeiger nicht zu verschieben, scheint eine Koordinationsaufgabe zu sein, die nicht jedem liegt. Es hilft mutmaßlich, wenn man man mal Klavierunterricht hatte, dann weiß man, wie man einen Finger bewegt und dabei die Hand ruhig hält.

Das Problem tritt schwerpunktmäßig bei Leuten auf, deren Hand zu klein für die Maus ist (oder deren Maus eher eine Bisamratte ist) und die den Handballen beim Klicken nicht auf den Tisch legen. Ich schaffe auch bei freifliegendem Handgelenk einen ruhigen Klick. Aber ich hatte ja auch Klavierunterricht (nicht, dass es viel genützt hätte).

Man kann das Problem abmildern, in dem man dem Label die CSS Eigenschaft pointer-events:none hinzufügt. Allerdings ist dann auch kein Cut+Paste des Labeltexts mehr möglich.

Rolf

[Der Martin]

Hallo Rolf,

Das Problem haben viele. Klicken und dabei die Maus ruhig halten, den Zeiger nicht zu verschieben, scheint eine Koordinationsaufgabe zu sein, die nicht jedem liegt.

das sehe ich regelmäßig bei meiner Mutter, die beim Klicken oft die Maus um ein paar Pixel "verreißt".

Es hilft mutmaßlich, wenn man man mal Klavierunterricht hatte, dann weiß man, wie man einen Finger bewegt und dabei die Hand ruhig hält.

Klavierunterricht hatte sie als Jugendliche wohl, aber entweder sind diese Fertigkeiten schon lange wieder dahin, oder sie kann das nicht auf die doch deutlich unterschiedliche Haltung und Bewegung übertragen.

Das Problem tritt schwerpunktmäßig bei Leuten auf, deren Hand zu klein für die Maus ist (oder deren Maus eher eine Bisamratte ist) und die den Handballen beim Klicken nicht auf den Tisch legen.

Ich halte die Maus normalerweise so, dass der Zeigefinger der linken Hand auf der linken Taste liegt, und den Rumpf der Maus halte ich seitlich mit Daumen und Mittelfinger. Unmittelbar vor dem Klick haue ich dann instinktiv (durch jahrelange Konditionierung) die Handbremse rein, indem ich Daumen und Mittelfinger, die immer noch die Maus seitlich umfassen, auf die Tischplatte drücke.

Ich schaffe auch bei freifliegendem Handgelenk einen ruhigen Klick. Aber ich hatte ja auch Klavierunterricht (nicht, dass es viel genützt hätte).

Ohne Auflegen schaffe ich das zumindest nicht zuverlässig.
Okay, ich hatte auch nie Klavierunterricht.

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Mouse-bashing

ich bin so froh, mir vor Jahren einen Trackball zugelegt zu haben. Den Mauszeiger mit dem Handgelenk oder gar ganzen Arm steuern zu wollen ist so extrem grobmotorisch. Das gelingt nun so viel filigraner mit dem Zeigefinger…

Gruß
Kalk

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

Ich halte die Maus normalerweise so, dass der Zeigefinger der linken Hand auf der linken Taste liegt, und den Rumpf der Maus halte ich seitlich mit Daumen und Mittelfinger.

Brrrr (oder <br><br><br> um es etwas dem Forum anzupassen) das ist ja schrecklich. Ist deine Maus so klein oder Hand so groß? Da bekomme ich sofort Krämpfe in der Hand.

Bei mir: Daumen und RF halten die Maus, ZF + MF liegen auf den Tasten. (58mm Maus)

/K

[Rolf B]

Hallo kai345,

Da bekomme ich sofort Krämpfe in der Hand.

Ich auch, bis ich las, dass es die linke Hand war.

Danach fühlte ich mich in etwa so doof so wie damals, als man mich fragte, ob ich mir mit der Hand an den Ellenbogen fassen kann…

Rolf

[Der Martin]

Hallo,

Ich halte die Maus normalerweise so, dass der Zeigefinger der linken Hand auf der linken Taste liegt, und den Rumpf der Maus halte ich seitlich mit Daumen und Mittelfinger.

Brrrr (oder <br><br><br> um es etwas dem Forum anzupassen) das ist ja schrecklich. Ist deine Maus so klein oder Hand so groß?

hmm, immer noch eine gute alte Microsoft Intellimouse 1.3 - ich habe in all den Jahren noch nichts Besseres gefunden. Leider geht mein Vorrat langsam zur Neige. Zwei neue und eine fast neue hab ich noch.

Da bekomme ich sofort Krämpfe in der Hand.

Bei mir ist das eine völlig entspannte, komfortable Haltung. Zum Klicken mit der rechten Taste oder zum Kraulen des Scrollrads spreize ich den Zeigefinger etwas ab.

Bei mir: Daumen und RF halten die Maus, ZF + MF liegen auf den Tasten. (58mm Maus)

Mal kurz nachgemessen: Die Microsoft-Maus ist auch knapp 60mm breit. Und kleiner sollte sie wirklich nicht sein.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Der,

Zum Klicken mit der rechten Taste (…) spreize ich den Zeigefinger etwas ab.

An der Stelle beginnt bei mir dann das Aua. Trotz Fingerspreizübungen im Klavierunterricht 😉.

Als Rechtsmäuser führe ich das Zeigesportgerät zwischen Daumen und kleinem Finger (wo die 60mm Mauskorpus genau zwischen passen) und linksklicke mit dem Zeigefinger. Am Rad drehen und rechtsklicken passiert mit dem Stinkefinger. Das am Rad drehen gelegentlich auch im Forum...

Rolf

[Der Martin]

Hallo,

Zum Klicken mit der rechten Taste (…) spreize ich den Zeigefinger etwas ab.

An der Stelle beginnt bei mir dann das Aua. Trotz Fingerspreizübungen im Klavierunterricht 😉.

aber wieso das denn? Die Finger sind doch in gewissen Grenzen auch seitwärts beweglich.

Als Rechtsmäuser führe ich das Zeigesportgerät zwischen Daumen und kleinem Finger (wo die 60mm Mauskorpus genau zwischen passen) und linksklicke mit dem Zeigefinger. Am Rad drehen und rechtsklicken passiert mit dem Stinkefinger.

Kleiner Finger fällt bei mir aus. Da habe ich weder genug Koordinationsvermögen noch Kraft. Der ist bei mir vorhanden, aber kaum zu gebrauchen (sowohl rechts wie links).

Und mit dem Mittelfinger am Rad drehen? Da müsste ich ja die ganze Hand auf der Maus ein Stückchen drehen. Sehr unpraktisch.
Oder ich halte die Maus generell mit der Hand in etwa parallel zur Maus-Längsachse. Aber dann ist die Hand mit der Maus "schief" zum Schreibtisch (weil sie ja ein kleines Stückchen seitlich von mir liegt). Nee, das passt schon so, wie ich es seit rund 30 Jahren gewöhnt bin.

Das am Rad drehen gelegentlich auch im Forum...

Und auch noch ganz woanders. 😉

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Klavierunterricht ... entweder ... oder

Es war ja auch nur eine Mutmaßung. Es kann genauso gut dran liegen, dass man jahrzehtelang eine Maus rumgeschubst hat und sie hinreichend oft verzogen hat, um es mittlerweile gelernt zu haben. Oder dass ich meine Maus nicht auf "10 Pixel pro Mickey" eingestellt habe. (Mickey⁉️)

Es ist auch alles nur hypothetisch. Ob Weiße Ziege dieses Problem hatte oder ob da was ganz anderes passiert, wissen wir nicht.

Rolf

[Weiße Ziege]

Hallo Rolf,

vielen Dank für deine Antwort, das ist aber sicher nicht das Problem (schon allein deshalb, weil am Laptop Cursorbewegung und Klick potentiell unabhängig sind). Die Seite zu zeigen, ist nicht so einfach für mich, weil sie noch nicht online ist. Da ich kommerziell arbeite, ist das vielleicht auch nicht so erwünscht...(?)

Ich dachte, vielleicht wäre das ja ein bekanntes Problem. Ansonsten brauchen wir ja nicht lange rätseln, wenn mans mit pointer-events:none beheben kann.

Viele Grüße Weiße Ziege

[Rolf B]

Hallo Weiße Ziege,

dann spielt da vielleicht deine konkrete Umsetzung des Beispiels mit hinein. Ohne ein Onlinebeispiel kann man nicht viel mehr dazu sagen.

Oder liegt es am konkreten Browser? Welchen verwendest Du da?

Rolf

[Gunnar Bittersmann]

@@Weiße Ziege

Ich habe das fancy-input-Beispiel Label like Placeholder in eine Webseite eingebaut.

Keine gute Idee.

Was dagegen spricht:

1. Ein nicht ausgefülltes Eingabefeld ist nicht so leicht von einem bereits ausgefüllten zu unterscheiden, wenn schon was drin steht.

2. Bei ausgefülltem Eingabefeld ist die Schrift des Labels so klein, dass es schwer zu lesen ist.

Labels gehören über das jeweilige Eingabefeld, nicht hinein.

Und dieses schlechte Beispiel sollte rückstandslos aus SELFHTML entfernt werden.

😷 LLAP

[Tabellenkalk]

Hallo,

Und dieses schlechte Beispiel sollte rückstandslos aus SELFHTML entfernt werden.

Ich habe den Eindruck, Du schüttest hier das Kind mit dem Bade aus.

Die zwei Kritikpunkte, die du anbringst sind vermutlich problemlos änderbar (zumindest bei dem einen ist mir das auf Anhieb gelungen). Die generelle Lösung für die Placeholder/Label-Tauschung ist m.E. sehr gelungen und sollte keinesfalls rückstandslos gelöscht werden!

Gruß
Kalk

Edith meint, ich soll meine Ratschläge sorgfältiger überdenken.

[Rolf B]

Hallo Tabellenkalk,

ich finde die Stelle nicht wieder, oder ich bin im Irrtum, aber ich meine, dass Gunnar auch einmal eine solche Darstellung als Beispiel gezeigt hätte.

Das muss ihn aber nicht daran hindern, seine Meinung zu ändern. Die Mehrdeutigkeit, dass ein unausgefülltes Feld mit "Placeholder-Label"^[1] und ein ausgefülltes Feld ohne Label^[2] gleich aussehen, bekommt man eher nicht weg.

Soviel Platz sollte immer sein, dass man ein Label über das Eingabefeld schreiben kann. Oder links daneben - der unbedingten Forderung, dass die Beschriftung über das Feld gehört mag ich nicht unbedingt folgen (wie sehen eigentlich chinesiche Formulare aus?)

Rolf

---

1. Ein Ding, das genauso real sein sollte wie CSS Klassen oder If-Schleifen ↩︎

2. Siehe Fußnote 1^[3] ↩︎

3. Ich wollte eigentlich ^1 und ^2 auf den gleichen Text zeigen lassen, aber das ist falsches Markdown und crasht obendrein das Forum. Issue. Zweimal ^1 verwenden ist auch nicht toll, weil das zweite ^1 als 1:1 angezeigt wird. Grmbl. ↩︎

[Gunnar Bittersmann]

@@Rolf B

ich finde die Stelle nicht wieder, oder ich bin im Irrtum, aber ich meine, dass Gunnar auch einmal eine solche Darstellung als Beispiel gezeigt hätte.

Ich hatte mal einen Artikel dazu geschrieben. Aber das ist lange her. Und inzwischen hab ich den aus guten Grund auch gar nicht mehr verlinkt.

Ich sollte ihn vielleicht ein letztes Mal bearbeiten und groß, fett und rot „Nicht machen, Kinder!“ drüberschreiben.

Das muss ihn aber nicht daran hindern, seine Meinung zu ändern. Die Mehrdeutigkeit, dass ein unausgefülltes Feld mit "Placeholder-Label"[^1] und ein ausgefülltes Feld ohne Label[^2] gleich aussehen, bekommt man eher nicht weg.

Man kann es durch Ausgrauen (Farbkontrast beachten!) oder Kursivschrift mildern. Der kognitive Mehraufwand zu erkennen, was Eingabe und was Label ist, bleibt für Nutzer aber.

Soviel Platz sollte immer sein, dass man ein Label über das Eingabefeld schreiben kann.

Amen.

Oder links daneben - der unbedingten Forderung, dass die Beschriftung über das Feld gehört mag ich nicht unbedingt folgen

Da holen wir mal das den Silver aus dem Bücherregal. Form Design Patterns sollte im Regal eines jeden Webentwicklers stehen. Ernsthaft.

Seite 31:

(wie sehen eigentlich chinesiche Formulare aus?)

Chinesisch (ebenso Japanisch und Koreanisch) wird im Web (fast) ausschließlich von links nach rechts geschrieben.

… aber das ist falsches Markdown und crasht obendrein das Forum. Issue.

Gesundheit!

😷 LLAP