Feld mit contenteditable=true als Dropdown oder Date picker?

[Rolf B]

Hallo Klaus1,

Mouseover verschlimmberssert die Sache nur, denn damit hängst Du außer den Tastaturanwendern auch noch die Touchscreenanwender ab.

Da es eine interne Anwendung ist, darf ich bestimmte Dinge, wie Browser und Version, Betriebssystem etc voraussetzen.

Ja. Aber du darfst deine Anwender trotzdem nicht zu unnötigem Denken zwingen. Das lenkt von der Arbeit ab. Mach deine Eingabefelder klar erkennbar.

Die Akrobatik mit input <-> text Tausch kannst Du meiner Meinung nach einfach bleiben lassen. Zeige alle Felder, die man eingeben kann, als input-Felder an. Dann kann man durchtabben und JS ist komplett unnötig.

Die Darstellung eines input-Feldes ohne Input-Rahmen geht mit Hilfe der Pseudoklassen-Kombination :not(:focus)

input[type=text]:not(:focus) {
   border-color: transparent;
   background-color: #bbb
}

Inputfelder die keinen Fokus haben zeigen nun keinen Rand, dafür sind sie grau schattiert (was natürlich nur ein Vorschlag ist). Sobald der Cursor im Feld ist, verschwindet das Grau und es erscheint der Rahmen (plus der Fokus-Outline des Browsers). Wenn Du andere input-Typen hast, die das auch nutzen sollen, dann kannst Du dafür Selektoren hinzufügen. Nur input ohne type solltest Du nicht ohne 3 Sekunden Nachdenken benutzen, denn damit beeinflusst Du ggf. Buttons oder Check-/Radioboxen.

Mit <select> Dropdowns geht es auch, und auch datalists sind dann kein Thema. Das Aufklappen einer datalist erfolgt mit Alt-Pfeilnachunten oder klick auf das kleine Dreieck. Problem ist nur, dass eine Datalist vorgefiltert wird, d.h. wenn die Werte Bar, Foo und Zonk möglich sind, du aber ein T eingibst, wird Dir nichts angeboten. Willst Du die ungefilterte Liste sehen, musst du das Feld leeren und dann Alt-Unten drücken.

Beispiel: https://jsfiddle.net/Rolf_b/fur7h52v/2

Rolf