今天仔细看了看猪八戒网站,发觉搜索框有个麦克风标志,用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为作输入提示了。