nicht angemeldet
Rolf BHallo alle,
<input id="foo" type="radio">
<label for="foo">Blubb</label>
Ich möchte, dass beim Klick auf das Label der Radiobutton ausgewählt wird. Easy. Dieser Button ist visuell versteckt und dient zum Markieren eine Zeile in einer Tabelle als "aktiv", die Hervorhebung erfolgt per CSS. Über der Tabelle habe ich einen "Edit" Button, um die ausgewählte Zeile zu bearbeiten. Den möchte ich nicht in der Tabelle haben, der Platz ist mir eh schon zu gedrängt (siehe meine sticky-Story).
Deshalb möchte ich für Mausbenutzer den Shortcut haben, auf die Zeile doppelklicken zu können. Tastaturbenutzer können excellent F2 drücken (oder Enter, mal gucken).
Schönheitsfehler: wenn ich doppelklicke, selektiert mir der Browser den Text. Ich kann im click-Event window.getSelection().empty() aufrufen, aber das Selektieren erfolgt beim Mousedown des zweiten Klicks, das click-Event aber erst beim Mouseup. D.h. für einen Moment wird das Feld selektiert und dann wieder deselektiert.
label { user-select:none; }
möchte ich vermeiden, grundsätzlich soll der Text auswählbar sein (durch click+drag beispielsweise).
Mein aktueller Würgherum: Ich fange das mousedown-Event auf dem Label ein und wenn das detail-Property vom Event-Objekt größer als 1 ist, rufe ich preventDefault() auf. Das unterdrückt die Auswahl, der Doppelklick kommt aber weiterhin durch. Ich bin selbst auf die Idee gekommen, aber hier stand es schon vor 8 oder mehr Jahren…
https://jsfiddle.net/Rolf_b/ybmx27a3
Aber das kommt mir umständlich vor und ich weiß auch nicht wie portabel das ist.
- Ist das portabel?
- Ist das der beste Weg oder geht das eleganter?
Rolf
sumpsi - posui - obstruxi