Feld mit contenteditable=true als Dropdown oder Date picker?

[Klaus1]

Hallo Rolf,

Die Maus (oder der Tap mit dem Finger) ist nicht die einzige Art, wie man in einer Webseite navigieren kann. Vergiss die Leute mit Tastatur oder Assistenzsystemen nicht.

Mit der Tab-Taste kommt auch in jedes contenteditable-Feld rein. Da es eine interne Anwendung ist, darf ich bestimmte Dinge, wie Browser und Version, Betriebssystem etc voraussetzen.

Darüber hinaus solltest Du deinen Usern einen visuellen Hinweis geben, wo sich Eingabefelder befinden. Wenn die Eingabefelder unfokussiert wie plain text aussehen, woher weiß man dann, dann etwas editierbar ist?

Mein MouseOver wird beim FF standardmäßig ein "Click to edit" eingeblendet. Das habe ich mit CSS eingedeutscht und etwas verschönert.

[contenteditable]:hover:after {
	position: absolute;
	background: #cccc99;
	color: #000;
	content: ' Anklicken zum Bearbeiten';
	padding-left: 15px;
	padding-right: 15px;
	border-radius:10px;
	font-style: italic;
	font-size: 12px;
	font-family: sans-serif;
	color: #444;
}

Wirklich böse ist, dass der Anwender hinter ein Input-Feld klicken kann und dieses dann löschen. Da ist es womöglich tatsächlich einfacher und flexibler, bei jedem TD ein onClick zu definieren und eine JS-Funktion aufzurufen, der dann ein Overlay genau über das TD-Feld mit dem Input-Feld (oder was auch immer) legt. Natürlich auch mit einem OnBlur, der den Wert übernimmt und das Overlay wieder versteckt. Oder?

LG Klaus