Chrome התחיל לתמוך ב-datalist
ל-input[type=text]
ב-Chrome 20. datalist
עוזר למפתחים לספק ערכים מומלצים, ובו זמנית מאפשר למשתמשים לכתוב ערכים שרירותיים בו-זמנית. החל מגרסה 23 של Chrome, ניתן להשתמש ב-datalist
גם עבור input[type=range]
וגם עבור input[type=color]
!
input[type=range]
datalist
עבור input[type=range]
מציג את היכולת של מפתחים להציג אינדיקטורים ליד פס ההזזה באופן הבא:
<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>
אם תזיזו את פס ההזזה של הקלט, תפסו את כל אחד מהסימונים כדי שהמשתמשים יוכלו להתאים את עצמם בקלות לערכים האלה.
input[type=color]
input[type=color]
כבר נתמך ב-Chrome וב-Opera. המשתמשים יכולים לבחור צבע שרירותי ללא עזרה מיישומי פלאגין של JavaScript.
הוספה של datalist
אל input[type=color]
תאפשר למשתמשים עכשיו לבחור צבע מדוגמיות צבע שנבחרו על ידי המפתח, וגם לבחור צבע שרירותי מבורר צבעים בלבד.
<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>
לתשומת ליבכם: המאפיין datalist
עבור input[type=color]
מקבל רק ערכי צבעים הקסדצימליים (לדוגמה, #ff0000
) וערכים כמו #f00
או red
לא יפעלו.
כדי לראות את התכונות החדשות האלה בפעולה, אפשר לעבור אל דף הדגמה.