将一个 div 的结果复制到 textarea-div答案

【问题标题】：Copying the result of one div to a textarea-div将一个 div 的结果复制到 textarea-div
【发布时间】：2014-01-16 22:56:22
【问题描述】：

我正在开发一个系统，该系统应该可以选择使用 Webspeech API 通过语音进行控制。我的问题或疑问是：如何将语音识别的结果（存储在“transcript-div”中）复制到“usercomment textarea-div”。就像用户说了什么一样，识别的字符串应该自动复制到用户评论中。

对应的代码行：
语音识别器：

    var recognition = new webkitSpeechRecognition();
    var final_transcript = '';
    var interim_transcript = '';
    var language = 'en-GB'; 

    recognition.continuous = true; // keep processing input until stopped
    recognition.interimResults = true; // show interim results
    recognition.lang = language; // specify the language

    recognition.onresult = function (event) {
        // Assemble the transcript from the array of results
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript = event.results[i][0].transcript;
            } else {
                interim_transcript = event.results[i][0].transcript;
            }
        }

        console.log("interim: " + interim_transcript);
        console.log("final: " + final_transcript);

        // update the web page
        if (final_transcript.length > 0) {
            $('#transcript').html(final_transcript);
        }

        if (interim_transcript.length > 0) {
            $('#interim').html(interim_transcript);
        }

出于调试目的，我创建了另一个 div，用于显示已识别的短语。这是有效的！

<div id="console" style="margin-top: 100px;">  
<h3>Console:</h3>  
    <div id="transcript"></div>  
    <div id="interim"></div>  
</div>

现在应该将“transcript-Div”的内容复制到usercomment-textarea-Div：

<div id="UsercommentDiv" style="margin-top: 100px;">  
    <br> User Comment :<br> <textarea id="usercomment" style="width: 300px; height: 150px;" name="description" onLoad="fillUsercomment();"></textarea><br>
</div>

我尝试通过以下函数来做到这一点：

function fillUsercomment(){
document.getElementById('usercomment').innerHTML = document.getElementById('transcript').innerHTML
}  
fillUsercomment();

fillUsercomment 函数有效（当我手动调用该函数时，它会将内容粘贴到 usercomment textarea。但是我必须如何更改代码，以便将已识别的输出即时粘贴到 textarea 中？

谢谢！

【问题讨论】：

标签： javascript jquery html webspeech-api

【解决方案1】：

取div 中的innerHTML 并将其作为value 应用于textarea (demo)：

var div = document.getElementById("transcript");
var txt = document.getElementById("usercomment");

txt.value = div.innerHTML;

或者jQuery方式：

$("#usercomment").val($("#transcript").html());

已编辑

如果final_transcript是你要附加的识别结果字符串，这里：

// update the web page
if (final_transcript.length > 0) {
    $('#transcript').html(final_transcript);
}

您应该将“final_transcript”附加到 textarea 的值：

var txt = $("#usercomment");
txt.val(txt.val() + final_transcript);

编辑 2

这里是 your updated fiddle（查看 JavaScript 的 17 行和 18 行）。

您可以阅读val() 函数是做什么的here

【讨论】：

感谢您的回答，但不幸的是我不够聪明（可能是因为我不是经验丰富的程序员，尤其是 jquery 对我来说很新）。所以...我不知道将您的建议包含在我的代码中。也许你可以看看这里。我创建了这个小提琴以获得更好的概览：jsfiddle.net/a4WLB
您只需将最终识别结果附加到“usercomment”文本区域？
已编辑 2. 不清楚的欢迎提问
像魅力一样工作 :) 非常感谢。只剩下一个问题了。是否有可能将功能映射到函数或类似的东西？一般来说，用户应该可以选择使用自己的声音填写其他输入字段（如项目描述、项目类型......）。所以基本上它是关于，根据当前的焦点，识别的输出应该被复制到 div。在您提供的示例中，每次都会将输出复制到 usercmets-div。再次感谢！
简单地说，你可以将一些textarea或input的ID传递给一些函数，这将开始识别；然后在第 17 行使用传递的 ID，而不是“#usercomment”。 Here 是一篇关于语音识别的好文章。

【解决方案2】：

使用 jQuery

$("#usercomment").attr("value", $("#transcript").text() );

或

 $("#usercomment").val( $("#transcript").text() );

附：抱歉我一开始理解错了，我现在编辑了。

【讨论】：