Google Chrome Canary 已嵌入 datalist

       當用戶在填寫表單時,有時候是個麻煩的過程。使用更多的選擇讓用戶有個更好的體驗是非常重要的,chrome canary中嵌入的datalist元素就能讓用戶在填寫表單的時候更加輕鬆便捷。


       通過使用datalist,你的應用能定義一系列的結果讓用戶選擇。不僅可以按選項選擇,還可以任意填寫內容。


       下面是一個demo:

       http://demo.agektmr.com/datalist/


      通過指定input元素的屬性值,可以快速關聯到datalist:

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option> 
  <option value="Orange"></option> 
  <option value="Peach"></option> 
</datalist>


datalist已經能適用於最新的火狐,opera以及IE 10.所以你不用擔心要做太多的測試比較。不過你想進一步確認瀏覽器能正常運行datalist,可以做以下測試:

<datalist id="fruits">
  Pick your favorite fruit
  <select name="fruit_sel">
  <option value="Apple">Apple</option> 
  <option value="Orange">Orange</option> 
  <option value="Peach">Peach</option> 
  </select>
  or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />


       如果你的瀏覽器能實現datalist,所有在datalist 選項將被隱藏。當input取得焦點時將能以列表形式顯現:



       如果你想使用這樣的回退機制,確認你的服務器能捕捉到“fruit_sel” and “fruit”查詢參數。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章