用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 相关文章推荐
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
React组件的三种写法总结
2017/01/12 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
django框架创建应用操作示例
2019/09/26 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python中upper是做什么用的
2020/07/20 Python
python如何实现递归转非递归
2021/02/25 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
表演方阵解说词
2014/02/08 职场文书
分层教学实施方案
2014/03/19 职场文书
学校安全防火方案
2014/06/07 职场文书
社区元宵节活动总结
2015/02/06 职场文书
医院合作意向书范本
2015/05/08 职场文书
七年级数学教学反思
2016/02/17 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
竞聘书的秘诀
2019/04/02 职场文书