Ein echter CSS-Trick von Will Boyd!
- Erzwinge die Auswahl des gesamten Inhalts eines Elements beim Anklicken mit
user-select: all; - Wenn du ein zweites Mal klickst, lass den Benutzer wie gewohnt nur Teile des Textes auswählen.
- Zweiter Klick? Nun, das ist ein Trick. Sie verwenden tatsächlich eine zeitverzögerte
forwards-endende@keyframes-Animation, wenn sich das Element im:focusbefindet, um es aufuser-select: text;zu ändern.
Wills Artikel enthält viele weitere nützliche Informationen und Anwendungsfälle für user-select.
Hmm, das scheint auf Mobilgeräten nicht sehr gut zu funktionieren. Würde gerne wissen, ob es eine ähnliche Wirkung wie auf dem Desktop erzielen kann.
Ich hasse Dinge, die das erwartete Verhalten ändern.
Wenn ich nur einen Teil dieses Codes auswählen muss, muss ich dreimal klicken.
Vielleicht wäre „Doppelklick zum Auswählen aller“ oder etwas Ähnliches besser.
Der ursprüngliche Artikel erklärt auch die Verwendung von
user-select: none;, was offensichtlich missbraucht wird.