javascript - Angular 表单的语音输入

Question

我正在使用 Angular 11，我需要将语音输入添加到表单字段。看了一些教程后，我才知道可以"x-webkit-speech"启用语音输入。

我参考了一篇文章https://codepen.io/matt-west/pen/wbpqu，他们正在使用 JavaScript。

我试图将脚本转换为 TypeScript，但我遇到了一些错误。

我希望将相同的东西转换为支持 Angular 9+ 的 TypeScript

HTML、CSS 和 JS 文件（将转换为支持 Angular 9+ 的 TypeScript）

var msg = document.getElementById('msg');

if (document.createElement('input').webkitSpeech === undefined) {
  msg.innerHTML = "x-webkit-speech is <strong>not supported</strong> in your browser.";
} else {
  msg.innerHTML = "x-webkit-speech is <strong>supported</strong> in your browser.";
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
  margin-top: 0;
}

label {
  display: block;
  padding-bottom: 0.25em;
}

input {
  display: block;
  font-size: 1.2em;
  padding: 0.25em;
  width: 100%;
  margin-bottom: 1em;
  border-radius: 3px;
  border: 1px solid #BABABA;
}

button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.8em;
  background: #69c773;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0 0.25rem;
  text-align: center;
}

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

<div id="page-wrapper">
  <h1>Speech Input Demo / Tester</h1>
  
  <p id="msg"></p>

  <label for="text">Text</label>
          <input type="text" id="text" x-webkit-speech>

        <label for="number">Number</label>
        <input type="number" id="number" x-webkit-speech>

        <label for="email">Email</label>
        <input type="email" id="email" x-webkit-speech>
  
        <label for="url">URL</label>
        <input type="url" id="url" x-webkit-speech>
  
  <label for="tel">Telephone</label>
        <input type="tel" id="tel" x-webkit-speech>
  
  <label for="date">Date</label>
        <input type="date" id="date" x-webkit-speech>
  
  <label for="datetime">Date and Time</label>
        <input type="datetime" id="datetime" x-webkit-speech>

  <label for="month">Month</label>
        <input type="month" id="month" x-webkit-speech>
  
    </div>

注意：我从网上引用了此代码。
链接 - https://blog.teamtreehouse.com/accepting-speech-input-html5-forms

标签： javascripthtmlcssangular10