2

我正在尝试创建一个可以弹出语音输入面板（在 HTML5 中）的按钮，并且我尝试使用<label>它：

<label>
    <input type="text" x-webkit-speech />
    ​&lt;button>Speak</button>
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://jsfiddle.net/DerekL/XzD2U/

但它只专注于<input>D：那不是我想做的。
有什么建议吗？（它不必支持 IE 或 Firefox，只支持谷歌浏览器）

添加

这就是我想要的：http: //jsfiddle.net/DerekL/RWCJR/
但我想使用真正的按钮而不是这个假<input>按钮。

4

2 回答 2

2

你能完成的事情非常有限。你所追求的是不可能的。触发语音的唯一方法是单击文本框中的麦克风图标。如果您愿意使用 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>
于 2012-04-10T03:58:43.340 回答
0

试试这个：

<label>
    <input onfocus="document.getElementById('myButton').focus();" type="text" x-webkit-speech />
    <button id="myButton"  >Speak</button>
</label>
于 2012-04-10T04:02:23.600 回答