javascript - 自定义语音输入按钮？

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，那么我认为您可以塞进一些东西。我就是这样做的。

1. 创建一个大小足以包含麦克风图标的文本输入
2. 使用转换使其成为按钮大小
3. 使其透明并覆盖在真正的按钮上
4. 点击不可见的麦克风时，使用 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>