·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]Datalist元素实现输入提示

时间:2017-12-14 14:38酷播
[html5]Datalist元素实现输入提示,HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷

HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷。

今天看到datalist 这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全,但似乎自动提示更贴切一些」功能。

具体来说,页面上的input还是原来的input,只是在它的下面定义一下新的datalist在其中填充触发提示的文本,同时在该input元素上指定list属性指向这个list。一个大概的例子大概是像下面这样

  1. 你最喜欢的浏览器是: 
    <input list="browsers"> 
  2. <datalist id="browsers"> 
  3.   <option value="Internet Explorer"> 
  4.   <option value="Firefox"> 
  5.   <option value="Chrome"> 
  6.   <option value="Opera"> 
  7.   <option value="Safari"> 
  8. </datalist> 

浏览器兼容性

下面的数据来自caniuse

来源:http://www.cnblogs.com/Wayou/p/autocomplete-with-html5-datalist.html

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器