柴静调查:穹顶之下_调查:HTML5数据列表

您可能已经在Web上的某处遇到了这种响应: 在输入表单中输入内容时,建议列表会出现在输入内容的底部

多年来,我们依靠JavaScript来创建这样的功能。 今天,我们可以使用新的HTML5 <datalist>元素来做到这一点。 这个HTML5新元素允许我们存储选项列表,这些选项列表将在用户在输入中键入时显示。

HTML5列表属性

可以使用新HTML5属性list<datalist>链接到<input>元素。 我们可以在几种输入类型(例如textsearch使用list 。 但是,根据Mozilla开发人员网络list属性不适用于以下输入类型: hiddencheckboxradiofilebutton

在以下示例中,我们使用<datalist>添加城市列表,并为其分配ID属性,如下所示。

<datalist id="city">
	<option value="Adelaide">
	<option value="Bandung">
	<option value="Bangkok">
	<option value="Beijing">
	<option value="Hanoi">
	<option value="Ho Chi Minh City">
	<option value="Hong Kong">
	<option value="Jakarta">
	<option value="Kuala Lumpur">
	<option value="Osaka">
	<option value="Seoul">
	<option value="Shanghai">
	<option value="Singapore">
	<option value="Surabaya">
	<option value="Sydney">
	<option value="Tokyo">
</datalist>

要将<datalist>挂接到<input>元素,只需添加list属性并引用id属性,就像这样。

<input class="destination-list" type="text" placeholder="From:" list="city">
<input class="destination-list" type="text" placeholder="To:" list="city">

浏览器行为

另一方面,当我们单击输入两次时 ,它将显示所有可用选项,如下所示。

专注于输入内容时, Firefox将不显示任何内容。 它将显示包含我们键入的值的选项。例如,下面的屏幕截图显示了Firefox显示包含字母“ u”的选项。

结合使用HTML5数据列表和Polyfills

有一些polyfill可以在不受支持的浏览器中复制类似的功能。 在本文中,我们将实现Michael Taylor的数据列表polyfills 。 要使用它,我们将需要jQuery和Modernizr来进行浏览器功能检测。

至于Modernizr,我们必须进行一些自定义。 在Modernizr下载页面中 ,检查以下选项。

  • HTML5部分下的输入属性
  • 可扩展性部分下的Modernizr.addTest
  • Extra部分下的Modernizr.load
  • 非核心检测下的elem-datalist

现在,让我们打开HTML文档,在其中添加<datalist>元素,并添加刚刚在<head>部分下载的Modernizr库。

<script src="js/modernizr.js" type="text/javascript"></script>

添加Modernizr之后,我们可以使用以下脚本测试浏览器是否支持datalist元素。

if (!Modernizr.datalistelem) {
	alert('This browser does not support HTML5 datalist element, so we will load the polyfills');
}

不支持datalist元素时,上面的脚本将显示一条警报,提示“此浏览器不支持HTML5数据列表元素,因此我们将加载polyfills” 。 在Safari中,它看起来像这样。

接下来,创建一个名为load.datalist.js的新JavaScript文件,并在下面添加此行。 这会将脚本定向到具有list属性的输入并将其运行。

$('input[list]').datalist();

最后,我们将使用Modernizr.load加载jQuery, jquery.datalist.jsload.datalist.js ,如下所示。

Modernizr.load({
	test: Modernizr.datalistelem,
	nope: ['js/jquery.js', 'js/jquery.datalist.js', 'js/load.datalist.js']
});

因此,仅在浏览器不支持<datalist>元素时才加载它们。

就这样,现在您可以查看正在运行的演示或从下面的链接下载源文件。

更多资源

以下是一些可以进一步深入研究该主题的资源。


翻译自: https://www.hongkiat.com/blog/html5-datalist/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值