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

问题描述

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

HTML

哪个是空盒子

这是输入框.

CSS

.printchatbox{边框宽度:厚10像素；边框样式:实心；背景色:#fff;行高:2；颜色:#6E6A6B；字体大小:14pt；文本对齐:左；浮动:中间；边框:3px 实心 #969293；宽度:40%；}

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

解决方案

您使用 onkeyup 事件

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

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

JS

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

这是一个现场示例

I have a website where there is a empty box and a input text box. I want to be able to type something in that input box and have it be printed on the empty box.

HTML

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

which is the empty box and

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

which is the input box.

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%;}

If anyone could tell me how to do this I would greatly appreciate it. Thanks

解决方案

You use the onkeyup event

Searching with ids is a lot easier. Add ids to your elements as follows:

<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;
}

Here is a Live example

这篇关于在文本输入字段中键入时，打印在 div 中键入的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！