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>

ここでの問題は、テキストボックスに2番目の単語を入力すると、DIVが更新されることです。つまり、1つの単語を入力すると、DIVに表示されず、2番目の単語を入力すると、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（ linefeed）の代わりに（carriagereturn + linefeed）を置き換える必要がある場合があることに注意してください\n。以下の例

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