Question

17

While typing in a text input field, printing the content typed in a div

rated 0 times [ 22] [ 5] / answers: 1 / hits: 81400 / 12 Years ago, sat, january 19, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kayden

Add To Favorites

Follow

Total Points: 546

Total Questions: 102

Total Answers: 95

Location: Virgin Islands (U.S.)

Member since Fri, Mar 4, 2022

2 Years ago

answered 12 Years ago isaacvalentinn · Accepted Answer

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