欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

x-webkit-speech input代码解释

(元素模板) / 2021-03-05 18:00

Google搜索的语音输入功能:

1. 检测浏览器是否支持

if (document.createElement("input").webkitSpeech === undefined) {
   alert("Speech input is not supported in your browser.");

2. 下面说下怎么实现,其实很简单。

<input type="text" x-webkit-speech /> 

就一句(so high),

3. 当然还有别的属性可以添加:

lang

设置语言种类: 

<input type="text" x-webkit-speech lang="zh-CN" />

onwebkitspeechchange

语音输入事件,当发声语音改变时触发: 

<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

function foo(){
  alert('changed');

x-webkit-grammar

语音输入语法,” builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如汉字“的”

<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" /> 

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

W3C:  http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html

Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com