Chrome unterstützt jetzt datalist
für input[type=text]
in Chrome 20. Mit datalist
können Entwickler empfohlene Werte bereitstellen und gleichzeitig beliebige Werte schreiben. Ab Chrome 23 können Sie datalist
auch für input[type=range]
und input[type=color]
verwenden.
input[type=range]
Mit datalist
für input[type=range]
können Entwickler Indikatoren neben dem Schieberegler anzeigen lassen:
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option>10</option>
<option>15</option>
<option>30</option>
<option>50</option>
<option>90</option>
</datalist>
Durch Bewegen des Schiebereglers in der Eingabe wird an jeden der Teilstriche angedockt, sodass sich die Nutzenden leicht an diese Werte anpassen können.
input[type=color]
input[type=color]
wird bereits in Chrome und Opera unterstützt. Nutzer können beliebige Farben ohne JavaScript-Plug-ins auswählen.
Wenn du datalist
zu input[type=color]
hinzufügst, können Nutzer jetzt eine Farbe aus vom Entwickler ausgewählten Farbmustern auswählen oder selbst eine beliebige Farbe aus einer Farbauswahl auswählen.
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
</datalist>
Beachte, dass datalist
für input[type=color]
nur die hexadezimalen Farbwerte (z. B. #ff0000
) und Werte wie #f00
oder red
funktionieren nicht.
Wenn Sie diese neuen Funktionen in Aktion sehen möchten, besuchen Sie eine Demoseite.