Question

我正在尝试创建一个可以弹出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>按钮。

Answer 1

你完成的任务非常有限。你所追求的是不可能的。触发语音的唯一方法是单击文本框中的麦克风图标。如果您愿意使用javascript，那么我认为您可以填写一些内容。这就是我要做的。

创建一个仅足以包含麦克风图标的文本输入
使用转换使按钮大小
将其透明并将其覆盖在真实按钮上
点击隐藏式麦克风后，使用javascript将新值复制到真实文本字段中。

http://jsfiddle.net/Lu3Vb/

你可以在这个例子中看到我是如何一起攻击它的。有两个按钮，一个带有完全透明的麦克风，另一个带有部分透明和红色边框，以便您可以看到效果。

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>

Answer 2

试试这个：

<label>
    <input onfocus="document.getElementById('myButton').focus();" type="text" x-webkit-speech />
    <button id="myButton"  >Speak</button>
</label>

自定义语音输入按钮？

加

2 个答案: