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

Question

我正在开发一个系统，该系统应该可以选择使用Webspeech API通过语音进行控制。我的问题是：如何将语音识别的结果(存储在"transcriptdiv"中)复制到"usercomment textareadiv"中。就像用户说了什么一样，识别出的字符串应该自动复制到usercomment中。

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

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>

现在，"成绩单分区"的内容应该复制到用户评论-文本区域分区：

<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文本区域。但是，我必须如何更改代码，才能将识别的输出动态粘贴到文本区域？

谢谢！

Answer 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"附加到文本区域的值：

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

---

编辑2

这是您更新的fiddle(查看JavaScript的17行和18行)。

你可以在这里阅读val()功能的作用

Answer 2

使用jQuery

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

或

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

附言：对不起，我一开始误解了，现在我编辑了。