Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 844
ctm Avatar asked Jan 19 '13 04:01

ctm


People also ask

Is typing an input?

<input type="week">

What is input text field?

Definition and Usage. The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters. Tip: Always add the <label> tag for best accessibility practices!


2 Answers

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

like image 75
nunespascal Avatar answered Oct 13 '22 08:10

nunespascal


http://jsfiddle.net/3kpay/

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

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
like image 42
codingbiz Avatar answered Oct 13 '22 10:10

codingbiz