Javascript 在文本框的按键事件上更新DIV的InnerHTML

我希望有一个输入框，用户可以在其中添加或更改文本，同时（或在他们完成后），我希望用他们刚刚键入的文本更新div中的文本

这是我使用的代码

JAVASCRIPT:

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

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

函数更改（boxid，divtoaffect）{
content=document.getElementById（“+boxid+”）.value；
document.getElementById（divtoEffect）.innerHTML=content；
} 

HTML:

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

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

名称：

名称：

地址：

这里的问题是，当我在文本框中键入第二个单词时，它会更新DIV，即当我键入单个单词时，它不会显示在DIV中，而当我键入第二个单词时，它会显示DIV中的第一个单词

而且，当我在Textarea字段中按Enter键时，在DIV中，它在同一行上继续。这是图片

---

使用

onKeyPress

事件代替

onKeyPress

编辑：扩展问题

您需要将回车（+linefeed）转换为

标记。如下所示（在生产线末端更换）

---

使用

onKeyPress

事件代替

onKeyPress

编辑：扩展问题

您需要将回车（+linefeed）转换为

标记。如下所示（在生产线末端更换）

---

非常感谢你。这很有帮助。当我按ENTER键时，我可以在下一行打字。但当我按ENTER键转到第三行时，它没有键入与之对应的DIV…我在这里缺少什么…？？我想你的意思是，它看起来像是在

DIV

之外。这是因为您将高度设置为50px。如果将其设置为

min height

而不是

height

，或者添加样式

overflow-y:auto看起来会更好谢谢我知道了。我一直隐藏着。我把它改成了
overfow:visible
非常感谢。这很有帮助。当我按ENTER键时，我可以在下一行打字。但当我按ENTER键转到第三行时，它没有键入与之对应的DIV…我在这里缺少什么…？？我想你的意思是，它看起来像是在
DIV
之外。这是因为您将高度设置为50px。如果将其设置为
min height
而不是
height
，或者添加样式
overflow-y:auto看起来会更好谢谢我知道了。我一直隐藏着。我将其更改为
overfow:visible