1

我想要一个输入框,用户可以在其中添加或更改文本,同时(或在他们完成后),我想用他们刚刚输入的文本更新 div 内的文本。

这是我使用的代码

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>

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

在此处输入图像描述

在此处输入图像描述

而且当我在 Textarea 字段中按 Enter 时,在 DIV 中它继续在同一行上。这是图像 在此处输入图像描述

4

1 回答 1

6

而不是onKeyPress,使用onKeyUp事件

编辑:扩展问题。

您需要将回车(+ 换行)转换为<br />标签。类似下面的东西(在行尾替换)

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

请注意,您可能需要替换\r\n(carriagereturn + linefeed) 而不是\n(linefeed)。下面的例子

content.replace(/\r\n/g, '<br>'); 
content.replace(/\n/g, '<br>');
于 2012-06-29T06:57:25.193 回答