2

音声入力パネル(HTML5)をポップアップできるボタンを作成しようとしていますが、<label>そのために使用しようとしました:

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

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

しかし、それは D にのみ焦点を当てて<input>います。それは私がやりたかったことではありません。
なにか提案を？(IE や Firefox をサポートする必要はありません。Google Chrome のみをサポートします)

追加した

これは私が望んでいるものです: http://jsfiddle.net/DerekL/RWCJR/しかし、この偽のボタンの代わりに本物の
ボタン を使いたいです。<input>

4

2 に答える 2

2

あなたが達成できることはかなり限られています。あなたが求めていることは不可能です。スピーチをトリガーする唯一の方法は、テキスト ボックスのマイク アイコンをクリックすることです。JavaScript を使用する意思がある場合は、何かを詰め込むことができると思います。これが私のやり方です。

  1. マイク アイコンを含めるのに十分な大きさのテキスト入力を作成します。
  2. 変換を使用してボタンのサイズにします
  3. 透明にして実際のボタンに重ねる
  4. 見えないマイクがクリックされたら、JavaScript を使用して新しい値を実際のテキスト フィールドにコピーします。

http://jsfiddle.net/Lu3Vb/

この例で、私がどのようにハッキングしたかを見ることができます。2 つのボタンがあり、1 つはマイクが完全に透明にオーバーレイされており、もう 1 つは部分的に透明で赤い境界線が付いているため、効果を確認できます。

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 に答える