Eingabefeld als Button

[Gunnar Bittersmann]

Ich habe ein Eingabefeld (readonly), beim Click darauf soll dessen Inhalt in die Zwischenablage kopiert werden.

Dass der Click auf ein Eingabefeld eine Aktion auslöst, dürfte befremdlich sein. Zum Auslösen von Aktionen sind Buttons da; mein erster Gedanke war also <input type="button">. Funktioniert aber nicht, da es die select()-Methode nur für Texteingabefelder, nicht aber für Buttons gibt.

Das Ding muss also <input type="text"> bleiben. Macht es Sinn, dem Eingabefeld role="button" zu verpassen?

Wenn das Ding so in die Rolle eines Buttons schlüpft, sollte es kein zugeordnetes label-Element haben, oder? (Aber natürlich eine aussagekräftige Beschriftung – per aria-label oder aria-labeledby.)

Wie in diesem Codepen?

<span id="accessible-label">copy to clipboard:</span>
<input value="some text" readonly="" role="button" aria-labeledby="accessible-label"/>

LLAP 🖖