利用HTML5 的Datalist 元素实现输入提示

HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷。
今天看到datalist这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全,但似乎自动提示更贴切一些」功能。
废话不多说直接上代码:

Paste_Image.png

大家可以根据我的代码去浏览器里去运行一下!
但相信大家在看了效果后跟我一样,发现了一个不足之处,在input右边会有向下的箭头,这让它看起来就像一个dropdown或者select「下拉框」,解决办法是多加两句CSS代码来将它隐藏,但此方法只是针对webkit内核的浏览器进行的优化:
input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none;}
当然细心的童鞋可能发现了加的浏览器前缀是webkit所以说现在这个css属性只有webkit浏览器支持的比较好,其他的浏览器大家可以去看一下有没有更好的方法去解决。如果不能解决的话只能说去降低用户体验了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,123评论 0 26
  • 不知何时才能遇见你 在细雨绵绵的春季 你撑着油纸伞缓缓走来 仿佛一道彩虹画在我心里。 不知何时才能遇见你 在阳光明...
    和风戏雨阅读 2,944评论 2 7
  • 阳光透过大大的落地窗洒在a的脸上,给略显冷漠的线条,镀上了一层温暖。a忽然抬起头来,面容恍然,直勾勾的看着对面的座...
    咚嘚隆咚东阅读 1,358评论 0 0
  • 前阵子《亲爱的客栈》热播,受到不少观众的好评,都市生活中忙碌的我们现在反而更向往远离喧嚣的生活,渴望在慢节奏生活中...
    潮流一起说阅读 1,196评论 0 1