javascript - 在文本输入字段中键入时，打印在 div 中键入的内容

Question

我有一个网站，其中有一个空框和一个输入文本框。我希望能够在该输入框中键入内容并将其打印在空框上。

HTML

<div class='printchatbox'></div>

这是空盒子

<input type='text' name='fname' class='chatinput'>

这是输入框。

CSS

.printchatbox 
    {border-width:thick 10px;border-style: solid; 
    background-color:#fff;
    line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
    border: 3px solid #969293;width:40%;}

如果有人能告诉我如何做到这一点，我将不胜感激。谢谢

Answer 1

您使用 onkeyup事件

使用 id 搜索要容易得多。将 id 添加到您的元素，如下所示:

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' id='chatinput'>

JS

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

这是一个Live example