Geek Answers Handbook

When entering text into the text input field, type the content typed in the div

I have a website that has an empty field and an input text field. I want to be able to type something in this input field and type it in an empty field.

HTML

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

which is an empty field and

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

which is an input field.

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 really appreciate it. Thanks

+11
javascript html input css
source share
6 answers

You are using the onkeyup event

Searching with identifiers is much easier. Add identifiers 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

+27
source share

http://jsfiddle.net/3kpay/

 <div class='printchatbox' id='printchatbox'></div> <input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
+2
source share

There are many ways to do this, perhaps the easiest way is to use jQuery. In the example below, I use the jQuery keyUp() function to listen for keyboard events, then write the updated value to .printChatBox

 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> </head> <body> <div class='printchatbox'>CHANGE ME</div> <input type='text' name='fname' class='chatinput'> <script type="script/javascript"> $('.chatinput').keyup(function(event) { newText = event.target.value; $('.printchatbox').text(newText); }); </script> </body> </html>

I wrote a working example here: http://jsbin.com/axibuw/1/edit

+2
source share

In your HTML

 <div id='printchatbox'></div> <br> <input type='text' id='fname' class='chatinput' onkeyup="annotate()">

In JS,

 function annotate(){ var typed= document.getElementById("fname").value; document.getElementById("printchatbox").innerHTML= typed; }

Click here for LIVE DEMO

+1
source share

This shows an error saying that MyId is not defined.

0
source share

Angular JS does this in two lines of code:

Just import Angular JS when importing other libraries:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">

Then on the first div (where you copy):

 <input type="text" ng-model="myID"> </input>

Then, in the place where you show the content: just write:

 <div> {{myID}}</div>

This is the best solution I've ever found!

-one
source share

More articles:


All Articles