用原生HTML5控件实现输入框自动提示(下拉列表补全)功能

  • A+
所属分类:HTML5+CSS3

用原生HTML5控件实现输入框自动提示(下拉列表)

示例

输入 "P" 试试?

本文介绍如何使用HTML5的输入列表属性和datalist元素,你可以轻松地设置了一个自动提示的输入框,不需要依赖jQuery或JavaScript。

实现非常简单,添加 list 属性到input字段,然后创建一个datalist元素。 id值与list属性对应即可。

注* 与label 的 for 属性类似,单击姓名标签,焦点自动移入输入框中:

浏览器支持

DataList控件元素,与list属性支持

Chrome31+

IE10+

Firefox 34+

Opera 26+

Safari 是目前唯一不支持的浏览器

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: