Question

I am want to have a input box, where a user can add or change text, and at the same time (or after they have finished), I want to update the text inside a div, with the text they just typed.

this is the code I used

JAVASCRIPT :

<script language="javascript" type="text/javascript"> 
function change(boxid,divtoaffect) { 
content = document.getElementById("" + boxid + "").value; 
document.getElementById(divtoaffect).innerHTML = content; 
} 
</script> 

HTML:

<table border="0" cellpadding="5" cellspacing="0" style="border-bottom:1px solid black; border-right:1px solid black; border-left:1px solid black; border-top:1px solid black" width="50%">
<tr>
    <td >Name:<br/><input type="text" id="text1" onKeyPress="change('text1','output1')"  /></td>
    <td valign="bottom"><div id="output1" style="font-weight:bold;height:20px;"></div></td>
</tr>
<tr>
    <td>Designation:<br/><textarea id="text2" rows="1" onKeyPress="change('text2','output2')"></textarea></td>
    <td valign="bottom"><div  id="output2" style="height:40px;"></div> </td>
</tr>
<tr>
    <td>Address:<br/><textarea id="text3" rows="2" onKeyPress="change('text3','output3')"></textarea></td>
    <td valign="bottom"><div id="output3" style="height:50px;"></div></td>
</tr>
</table>

The problem here is that it updates the DIV when I type the second word in the textbox,i.e when I type a single word it doesn’t show up in the DIV and when I type the second one it shows the first word in the DIV.

And also when I Press Enter in the Textarea field , in the DIV it continues on the same line. Here’s the Image

Answer 1

Instead of onKeyPress, use the onKeyUp event

EDIT: Extended question.

You need to convert a carriage return (+ linefeed) into a <br /> tag. Something like below (replace at end of the line)

function change(boxid,divtoaffect) { 
  content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>');
  document.getElementById(divtoaffect).innerHTML = content; 
}

Note that you may need to replace \r\n (carriagereturn + linefeed) instead of \n (linefeed). Example below

content.replace(/\r\n/g, '<br>'); 
content.replace(/\n/g, '<br>');