我正在尝试创建一个可以弹出speech input panel的按钮(在HTML5中),我尝试使用<label>
:
<label>
<input type="text" x-webkit-speech />
<button>Speak</button>
</label>
http://jsfiddle.net/DerekL/XzD2U/
但它只关注<input>
D:这不是我想做的
有什么建议吗? (它不必支持IE或Firefox,只支持Google Chrome)
这就是我想要的:http://jsfiddle.net/DerekL/RWCJR/
但我想使用真正的按钮而不是这个假的<input>
按钮。
答案 0 :(得分:2)
你完成的任务非常有限。你所追求的是不可能的。触发语音的唯一方法是单击文本框中的麦克风图标。如果您愿意使用javascript,那么我认为您可以填写一些内容。这就是我要做的。
你可以在这个例子中看到我是如何一起攻击它的。有两个按钮,一个带有完全透明的麦克风,另一个带有部分透明和红色边框,以便您可以看到效果。
CSS
input.speechbutton {
position: absolute;
top: 0;
left: 0;
opacity: 0;
height: 20px;
width: 20px;
margin-left: 30px;
-webkit-transform: scale(3.0, 1.0);
}
HTML
<div style="position: relative;">
<button>Speech</button>
<input class="speechbutton" type="text" value="" x-webkit-speech />
</div>
答案 1 :(得分:0)
试试这个:
<label>
<input onfocus="document.getElementById('myButton').focus();" type="text" x-webkit-speech />
<button id="myButton" >Speak</button>
</label>