Как записать текст в текстовое поле

Question

Это сложный вопрос, но здесь. Я создал функцию jquery chat, в которой я ввожу что-то в тег текстового поля и нажимаю send, и он переходит в окно чата. Это сделано.

Я просто нашел голос в текстовой библиотеке, используя javascript.

Моя проблема в том, что я не знаю, как разместить все необходимые теги html внутри тега textfield ... Я не думаю, что это возможно ... или, может быть, я ошибаюсь.

Вот как работает код, как сейчас (без голоса) https://jsfiddle.net/v3Lru135/

Вот код, с голосом, и моя попытка добавления HTML-теги https://jsfiddle.net/9r93vcsq/

Может кто-нибудь помочь мне получить это так когда я нажать на эту кнопку и начать говорить он ставит то, что я говорю в виде текста в текстовое поле, так что я могу ударить отправить .... Спасибо

<div id="chatContainer"> 

    </div> 

    <div id="chatControls"> 

    <!--<textarea id="chatTextBox" placeholder = "Enter your message 
here..."> </textarea>--> 

<div id="chatTextBox"> 
    <div> 
     <a href="#" id="start_button" 
onclick="startDictation(event)">Dictate</a> 
    </div> 

    <div id="results"> 
     <span id="final_span" class="final"></span> 
     <span id="interim_span" class="interim"></span> 
    </div> 
    </div> 


    <button id="chatSend">Send</button> 

#chatContainer{ 
    width: 95%; 
    height: 50px; 
    background: url(../assets/chatTile.png) repeat; 
    border: 1px solid #333; 
    margin: 0 auto; 
    border-radius: 5px; 
    margin-top: 10px; 
    overflow-y: scroll !important; 
    padding: 5px; 
} 
#chatTextBox{ 
    resize: none; 
    width: 65%; 
    height: 35px !important; 
    float: left; 
    opacity: .9; 
} 
#chatControls{ 
    width: 100%; 
    padding-left: 10px; 
    padding-right: 10px; 
    display: inline-block; 
} 
#chatSend{ 
    resize: none !important; 
    width: 50%; 
    height: 35px !important; 
    display: inline-block; 
    max-width: 30%; 
    float: right; 
    opacity: .9; 
    padding: 5px; 
} 


.chatUsername{ 
    color: red; 
    font-weight: bold; 
} 
.botMan{ 
    color: #424242; 
    font-weight: bold; 
} 



var canned = ["Ok, how is this?" , "You're welcome!"] 

$(function() { 

    // grab a reference to the chat 
    var chat = $("#chatContainer") 

    // add a click handler to send messages 
    $("#chatSend").click(function() { 

    var username = "<span class=chatUsername>CNN_News: </span>" 
     , newMessage = $("#chatTextBox").val() + '<br>' 
     , delay = 4000 

    // reset the input 
    $("#chatTextBox").val("") 

    // render the chat 
    chat.append(username + newMessage) 
    chat.scrollTop(chat.prop("scrollHeight")) 

    // set a timeout to send a canned response 

    setTimeout(function() { 
     chat.append('<span class=botMan>StarkFan: </span>' + 
canned.shift() + '<br>') 
     chat.scrollTop(chat.prop("scrollHeight")) 
    }, delay) 

    // end of click handler 
    }) 
}) 















var final_transcript = ''; 
var recognizing = false; 

if ('webkitSpeechRecognition' in window) { 

    var recognition = new webkitSpeechRecognition(); 

    recognition.continuous = true; 
    recognition.interimResults = true; 

    recognition.onstart = function() { 
    recognizing = true; 
    }; 

    recognition.onerror = function(event) { 
    console.log(event.error); 
    }; 

    recognition.onend = function() { 
    recognizing = false; 
    }; 

    recognition.onresult = function(event) { 
    var interim_transcript = ''; 
    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; 
     } 
    } 
    final_transcript = capitalize(final_transcript); 
    final_span.innerHTML = linebreak(final_transcript); 
    interim_span.innerHTML = linebreak(interim_transcript); 

    }; 
} 

var two_line = /\n\n/g; 
var one_line = /\n/g; 
function linebreak(s) { 
    return s.replace(two_line, '<p></p>').replace(one_line, '<br>'); 
} 

function capitalize(s) { 
    return s.replace(s.substr(0,1), function(m) { return m.toUpperCase(); }); 
} 

function startDictation(event) { 
    if (recognizing) { 
    recognition.stop(); 
    return; 
    } 
    final_transcript = ''; 
    recognition.lang = 'en-US'; 
    recognition.start(); 
    final_span.innerHTML = ''; 
    interim_span.innerHTML = ''; 
} 

Answer 1

Похоже, что вы могли бы изменить пример, приведенный на сайте в соответствует вашим потребностям: http://www.labnol.org/software/add-speech-recognition-to-website/19989/

function startDictation() { 

    if (window.hasOwnProperty('webkitSpeechRecognition')) { 

     var recognition = new webkitSpeechRecognition(); 

     recognition.continuous = false; 
     recognition.interimResults = false; 

     recognition.lang = "en-US"; 
     recognition.start(); 

     recognition.onresult = function(e) { 
     // commented out the old commands, your new command is below these comments 
     // document.getElementById('transcript').value = e.results[0][0].transcript; 
     // recognition.stop(); 
     // document.getElementById('labnol').submit(); 
     $("#chatTextBox").val(e.results[0][0].transcript); // set the input val to the speech transcript 
     }; 

     recognition.onerror = function(e) { 
     recognition.stop(); 
     } 

    } 
    } 

Если это не работает, можно попробовать отладку печати содержимого results.