HTML5 语音搜索只需一句代码


Posted in HTML / CSS onJanuary 03, 2013

HTML5 语音搜索只需一句代码

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

其实实现只需一句代码即可:

x-webkit-speech

一看到这句代码,想到了什么?对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢?

复制代码代码如下:


<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech>

放在文本输入框内就行了,其他的什么都不用做,看

HTML5 语音搜索只需一句代码

当然还有一些其他的参数,比如设置语音限制语言种类

复制代码
代码如下:

<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech lang="zh-CN">

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉“的”、“啦”这类无意义的字
复制代码
代码如下:

<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech x-webkit-grammar="bUIltin:search">

当然在测试时候发现一个小问题,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了

HTML5 语音搜索只需一句代码

相关阅读:HTML5 语音搜索(淘宝店语音搜素)

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 #HTML / CSS
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python修改字典键(key)的方法
2019/08/05 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
大学生学期个人总结
2015/02/12 职场文书
老乡聚会通知
2015/04/23 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
第二次离婚起诉书
2015/05/18 职场文书
上甘岭观后感
2015/06/10 职场文书
2015党建工作简报
2015/07/21 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
学习心理学心得体会
2016/01/22 职场文书