其实大家都能从一淘啊或者淘宝相关的产品里面看到这样的输入框:
好奇的人都会查看源码看看到底是什么东东?
里面有两个东东:
1、x-webkit-speech
目前只有Chrome 11+的支持
属性和事件介绍:
- lang
<input type="text" x-webkit-speech lang="zh-CN"/>
- onwebkitspeechchange
语音发生变化时候触发的
2、x-webkit-grammar
可以控制输入的语法
Bug场景:
在iframe里面的提示层有位置偏移?http://www.php100.com/html/webkaifa/HTML5/2012/1212/11757.html
相关推荐
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法。 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了。 其实很简单,语音识别是html5的...
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势...3.x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索
Speechifier 是一个简单、静音的 Chrome 扩展程序,它使每个文本框都成为语音输入框。 使用此扩展程序,您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素...
Html5支持语音搜索,可惜的是...语音输入其他属性: lang 就是语言种类 可以控制输入框里面的语音的语言种类,例如 <input type="text" x-webkit-speech lang="zh-CN"/> 目前已知的只有onwebkitspeechchange,顾
可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-... 语音输入其他属性: lang这玩意可以强制输入框里面的语音的语言种类,例如 <input type=text x-webkit-speech lang=zh-C
另外,x-webkit-speech 属性可以实现语音输入功能。 代码如下: <div><input type=”email” name=”email” spellcheck=”false” placeholder=”邮 箱” autofocus tabindex=”1″ x-webkit-speech></div> ...
placeholder 默认提示字符 autofocus 当页面加载时,会获得焦点的一个按钮 x-webkit-speech 语音搜索,webkit内核才支持 accept 规定可上传的文件类型(仅适用type=file) alt 规定图片输入控件代替文本 ...
淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。 其实实现只需一句代码即可: x-webkit-...
controller.js处理按钮输入并在speechRecognition.js开始识别 用法 在服务器上运行它,例如使用python: $ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... 使用Webkit...
Google曾在自己的官方博客中宣布在Beta版Chrome25 中将加入网络语音API(Web SpeechAPI),让用户在某些嵌入了JavaScript的网页中可以更方便地使用语音指令、听写等功能。同时新版本在内容安全策略标头(Content ...