关注前端开发
关注用户体验

简单HTML5打造内涵搜索框

随着HTML5的深入人心,其越来越多的新功能为更多Coder所用,HTML5新增了不少人性化标签和属性,马上介绍的就是新的表单属性。

实例图片:

代码如下:

<input type="text" placeholder="输入 回车搜索" autofocus x-webkit-speech>

很赞?Yes!

简短的几个代码就能实现原本多行JS才能实现的完美交互效果,这就是HTML5略窥一点的赞!

placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当input的内容变动时,这个值就消失,它的职责就是给人一种亲和力的指示,十分有爱。

autofocus,顾名思义:自动聚焦,当进入当前页面时,这个input会自动获取焦点,而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的input聚焦。

x-webkit-speech,这个大概不必多解释了,webkit核的浏览器(如Chrome)特有的语音识别工具,给input装上也是再好不过的了,话说Google也给自己的搜索框装上这个工具。

好了,不扯了,简单的一个小框框,其实有更多需要我们研究的东西。比如这个简单CSS3 让搜索更有爱是我之前写的搜索框有爱体验,简单即是美!

未经允许不得转载:大前端 » 简单HTML5打造内涵搜索框
分享到:更多 ()

评论 20

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #17

    :smile: 写文章标题要 内涵啊 哈哈

    疯子3年前 (2013-10-23)回复
  2. #16

    标题很亮。。。

    camnpr4年前 (2013-07-25)回复
  3. #15

    内涵搜索框 。。。

    babytomas4年前 (2013-02-09)回复
  4. #14

    mianm19864年前 (2013-01-24)回复
  5. #13

    很强大

    老衲5年前 (2012-08-11)回复
  6. #12

    不错的搜索相当强悍

    dedecms模板5年前 (2012-06-10)回复
  7. #11

    学习了,很赞。。。。。。

    fengzheng1265年前 (2012-06-09)回复
  8. #10

    刚刚在另一个博客看到搜索框带着语音识别,还以为是谷歌自定义搜索,搜了一下发现不是,到你这里找到答案了,原来用HTML5如此简单

    Sola5年前 (2012-05-30)回复
  9. #9

    不错,学习了~

    南京股票开户5年前 (2012-05-16)回复
  10. #8

    主题越来越好看了!

    猴姆独家5年前 (2012-05-15)回复
  11. #7

    学习了,支持大前端,非常喜欢你的d7主题 什么时候能放出来啊

    5不出来5年前 (2012-05-14)回复
  12. #6

    placeholder IE没支持,杯具。我们现在还是自己写的插件实现这个功能的。
    autofocus 还是头一回看到,学习了

    前端组5年前 (2012-05-14)回复
  13. #5

    强大。用空自己试试

    FK博客5年前 (2012-05-11)回复
  14. #4

    就是个placeholder?

    wmtimes5年前 (2012-05-11)回复
  15. #3

    UC也可以语音输入了

    蚂蚁在线5年前 (2012-05-11)回复
  16. #2

    原来在输入框里加上语音输入这么简单呀,我也加了

    互联网战5年前 (2012-05-10)回复
  17. #1

    很强,学习了

    Ioopen5年前 (2012-05-10)回复
    • :sad:

      zi2u4年前 (2013-01-21)回复

themebetter 国内更好的WordPress主题服务商

立即前往