HTML5 元素 datalist 介绍

文章目录

元素介绍

想象一下我们想要用户输入一个字符串,例如他们的名字,我们可能会用到<input type="text"/>元素,这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地,我们更喜欢使用<select>元素,这个将会限制可选的结果(有时候也许是好的),并且还存在着一个潜在的巨大用户选择。

但如果我们想要用户自由输入的同时又有一些建议选项,这里就是<datalist>的用处了。

示例代码

datalist包含<option>元素,类似于<select>元素,然而<datalist>并不是独立控制,相反它是附加在<input type="text"/>上的list,类似于下面的这段代码:

<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" />
<option value="Coda" />
<option value="Dreamweaver" />
<option value="Espresso" />
<option value="jEdit" />
<option value="Komodo Edit" />
<option value="Notepad++" />
<option value="Sublime Text 2" />
<option value="Taco HTML Edit" />
<option value="Textmate" />
<option value="Text Pad" />
<option value="TextWrangler" />
<option value="Visual Studio" />
<option value="VIM" />
<option value="XCode" />
</datalist>

这段代码里面使用到了<input type="text"/>控制着一个list的新属性,这是告诉浏览器加载一个id为上面list的值的这个列表值或者来自datalist的建议。

浏览器效果

datalist

根据官方W3C的文档,datalist还可以用于下面这些

  • <input type="text" />
  • <input type="url" />
  • <input type="tel" />
  • <input type="color" />
  • Data & Time (including Month etc.), Range and more.

更多的属性

我们还可以给它的option添加一个label属性

<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" label="by Adobe" />
<option value="Coda" label="by Panic" />
<option value="Dreamweaver" />
<option value="Espresso" />
<option value="jEdit" />
<option value="Komodo Edit" />
<option value="Notepad++" />
<option value="Sublime Text 2" label="the developer's choice" />
<option value="Taco HTML Edit" />
<option value="Textmate" />
<option value="Text Pad" />
<option value="TextWrangler" />
<option value="Visual Studio" />
<option value="VIM" />
<option value="XCode" />
</datalist>

browsers

兼容性

支持最新IE10、Firefox、Chrome和Opera,不支持iosAndroid,你可以在这里查看最新支持:canIUse

caniuse

更多资源

演示

原创文章:HTML5 元素 datalist 介绍 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/datalist.html)

发表评论

请登录后发表评论:

“HTML5 元素 datalist 介绍”有1个评论

  1. jaw crusher

    datalist 元素
    datalist 元素规定输入域的选项列表。
    列表是通过 datalist 内的 option 元素创建的。
    如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id

    登录回复