HTML Forms 中的語音識別

Question

我是 javascript 的初學者，我想創建一個接受用戶語音並將其顯示在輸入文本字段中的表單。

<body>
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="change1()">Change Text</button>
</body>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}
</script>

這很好用，但是當我在form標簽中使用它時它不起作用

<form action="" method="GET">
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="change1()">Change Text</button>
    <br>
    <input type="submit" name="" id="">
</form>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}
</script>

在這里，當我單擊“更改文本”按鈕時，沒有任何反應，並且 URL 更改了 file:///C:/Users/zjohn/Desktop/sample1.html?answer1=

請告訴我哪里出錯了，以及如何解決這個問題。

Answer 1

單擊按鈕時表單正在提交！ 您需要在按鈕上使用preventDefault()以便它不會提交。

試試下面：

<form action="" method="GET">
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="preventDefault(); change1();">Change Text</button>
    <br>
    <input type="submit" name="" id="">
</form>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}

HTML Forms 中的語音識別

問題描述

1 個解決方案

解決方案1
0 2021-04-01 03:51:13

HTML Forms 中的語音識別

問題描述

1 個解決方案

解決方案1 0 2021-04-01 03:51:13

解決方案1
0 2021-04-01 03:51:13