令网站支持语音输入功能

今天仔细看了看猪八戒网站,发觉搜索框有个麦克风标志,用Chorme看了下属性:x-webkit-speech,通过使用google的语音服务支持语音输入功能(此功能不是所有浏览器都支持)


使用方法很简单,在input里面增加  x-webkit-speech=="true"
<input type="text" x-webkit-speec/> 
就一句,当然还有别的属性可以添加: 
lang
设置语言种类: 
1 <input type="text" x-webkit-speech lang="zh-CN" />


onwebkitspeechchange
语音输入事件,当发声语音改变时触发: 
1 <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
2  
3 function foo(){
4   alert('changed');
5 }

x-webkit-grammar
语音输入语法,”  builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」 
1 <input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />

PS : 如果原input中value不为空,输入会直接添加在原有文字后面。既然用webkit就要用placeholder参数了,不要再使用value为作输入提示了。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值