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自定义滚动条样式写法
Dec 25 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 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
PHP脚本的10个技巧(5)
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
详解Nodejs mongoose
2018/06/10 NodeJs
react 国际化的实现代码示例
2018/09/14 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
设计总监岗位职责
2013/12/07 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
大学生作弊检讨书
2014/09/11 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
优秀员工事迹材料
2014/12/20 职场文书
鼋头渚导游词
2015/02/05 职场文书
悬空寺导游词
2015/02/05 职场文书
转变工作作风心得体会
2016/01/23 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python