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


Posted in HTML / CSS onMarch 18, 2014

我们先看下他们的不同显示。
下面是在火狐下的截图:
用html5实现语音搜索框的方法

下面这个是在chrome下的截图:
用html5实现语音搜索框的方法

能猜想到的,就是写的代码肯定是不兼容的。不过你会发现真是比较简单的,就算你是前端初学者你也会明白

复制代码
代码如下:
<input type="text" class="text" name="test" id="test" x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search">

其中参数的意义:
x-webkit-speech:就是让你的输入框的右边出现一个小话筒,有了语音的功能。
lang:则是 强制输入框里面的语音的语言种类,例如上面写的 lang="zh-CN"指的是简体中文。
x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。

注:不过这个硬件方面的兼容性还是有待提高,因为当你中英夹杂语音的时候,估计是会状况百出的。

HTML / CSS 相关文章推荐
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 #HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 #HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 #HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 #HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php部分常见问题总结
2008/03/27 PHP
YII框架常用技巧总结
2019/04/27 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
《草原》教学反思
2014/02/15 职场文书
开业典礼主持词
2014/03/21 职场文书
股权转让意向书
2014/04/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
大学生村官考核材料
2014/05/23 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL