Javascript - 检测 x-webkit-speech 图标上的点击

Question

我在输入元素上使用 x-webkit-speech 属性。单击麦克风图标时，我想触发 Javascript 函数，但似乎无法找到检测单击的方法。这可能吗？

Answer 1

这是我发现的，W3C Speech Input API Specification (Draft)确实指定了 onspeechstart以及 onspeechend然而，在撰写本文时，Chrome 尚未将这些实现为 onwebkitspeechstart 和 onwebkitspeechend。

所以我的工作是创建两个输入元素，其中一个使用 x-webkit-speech 但宽度较小，因此仅显示麦克风图标。另一个输入没有 x-webkit-speech。这使我能够检测 x-webkit-speech 输入上的 onclick 事件，并且当 webkitspeechchange 事件被触发时，我将文本移动到更大的输入。

我还发现了一个小技巧，您可以缩放麦克风尺寸:

  #theinput {
    -webkit-transform: scale(3.0, 3.0);
    -moz-transform: scale(3.0, 3.0);
    -ms-transform: scale(3.0, 3.0);
    transform: scale(3.0, 3.0);
  }