用html5实现语音搜索框的方法
发布时间：2014-03-18 13:50:33 作者：佚名 
我要评论
我要评论作为一个专业的淘宝控，不知道从什么时候开始发现淘宝上居然还有语音搜索，好吧，因为好奇心作祟还是想一探究竟，不过我想仔细一点的人，都会发现在只有在webkit内核的浏览器上有，原因是它只支持webkit内核浏览器
我们先看下他们的不同显示。
下面是在火狐下的截图：
下面这个是在chrome下的截图：
能猜想到的，就是写的代码肯定是不兼容的。不过你会发现真是比较简单的，就算你是前端初学者你也会明白
复制代码
代码如下:<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实现移动端固定悬浮半透明搜索框的相关资料,需要的朋友可以参考下2017-10-17
一款html5+css3实现的超酷绿色发光搜索表单2014-04-22
本文通过实例代码给大家分享8款纯CSS3实现的搜索框功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-14
本范例仅仅使用了CSS3实现,无需js代码,可惜的是不能在ie下使用2013-05-02- 搜索框是我们经常见到的网站功能，它的美观直接影响着网站舒适度，一般我们都会下功夫美化搜索框。2009-12-03
- 今天让学生实现一个搜索框的效果，死活做不出来.2009-10-13
这篇文章主要介绍了基于html css实现带搜索图标的搜索框功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-09
最新评论