`
v5browser
  • 浏览: 1139948 次
社区版块
存档分类
最新评论

带语音搜索的搜索框---HTML5

 
阅读更多

在网上看见别人总结的带语音的搜索框,觉的又神奇又简单方便,收了!嘿嘿偷笑偷笑偷笑

在你的网页里面加上一句简单的代码就可以了


<inputtype="text"placeholder="输入 回车搜索"autofocusx-webkit-speech>

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

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

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

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


截图如下

分享到:
评论

相关推荐

    用html5实现语音搜索框的方法

    我们先看下他们的不同显示。下面是在火狐下的截图: 下面这个是在chrome下的截图: 能猜想到的,就是写的代码肯定是不兼容的。不过你会发现真是比较简单的,就算你...lang:则是 强制输入框里面的语音的语言种类,例如

    HTML5 语音搜索只需一句代码

    淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。 其实实现只需一句代码即可: x-webkit-...

    AI人工智能主播:情感与技术的完美融合:AI人工智能主播带来全新视听体验

    支持搜索和搜图服务 duckduckgo(需要魔法上网) 支持搜图服务 baidu 搜图(不需要魔法上网) 支持 AI 回复聊天框【html 插件】 支持 AI 唱歌 Auto-Convert-Music 支持歌单【html 插件】 支持跳舞功能 支持表情视频...

    E语言1000模块

    2004-08-27 08:10 38059 9678 易语言模块大全\edb到html-1.0.ec 2005-10-21 15:30 29279 5674 易语言模块大全\EDB数据库客户端模块 1.0.ec 2005-10-21 15:30 12012 3814 易语言模块大全\edb数据库转Excel模块 1.0....

    易语言模块大全汇总批量下载

    2004-08-27 08:10 38059 9678 易语言模块大全\edb到html-1.0.ec 2005-10-21 15:30 29279 5674 易语言模块大全\EDB数据库客户端模块 1.0.ec 2005-10-21 15:30 12012 3814 易语言模块大全\edb数据库转Excel模块 1.0.ec...

    1000个【易语言模块大全汇总批量下载】

    2004-08-27 08:10 38059 9678 易语言模块大全\edb到html-1.0.ec 2005-10-21 15:30 29279 5674 易语言模块大全\EDB数据库客户端模块 1.0.ec 2005-10-21 15:30 12012 3814 易语言模块大全\edb数据库转Excel模块 1.0.ec...

    java开源包1

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java-ISkyShop多用户商城系统 v1.4 UTF8.zip.zip

    ISkyShop开发团队历经4个月的设计研发,于 2014...8、调整顶部搜索风格,拉长顶部搜索框,增加HTML5语音支持; 9、调整首页底部文章分类为8组,支持更多系统文章; 10、调整商品列表页为响应式布局,默认宽度为1200px,

    java开源包10

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包5

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包4

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包7

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包11

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包2

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包3

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包6

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包8

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包9

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

    java开源包101

    用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC框架 nfs-rpc nfs-rpc是一个集成了各种知名通信框架的高性能RPC框架,目前其最好的性能为在采用...

Global site tag (gtag.js) - Google Analytics