Обновление InnerHTML DIV в событии Keypress текстового поля

Я хочу иметь поле ввода, в котором пользователь может добавлять или изменять текст, и в то же время (или после того, как они закончили) я хочу обновить текст внутри 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 .

введите здесь описание изображения

введите здесь описание изображения

А также, когда я нажимаю Enter в поле Textarea, в DIV он продолжается в той же строке. Вот изображение введите здесь описание изображения


javascript html onkeyup
person Leroy Mikenzi    schedule 29.06.2012    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вместо onKeyPress используйте событие onKeyUp

РЕДАКТИРОВАТЬ: Расширенный вопрос.

Вам нужно преобразовать возврат каретки (+ перевод строки) в тег <br />. Что-то вроде ниже (заменить в конце строки)

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

Обратите внимание, что вам может понадобиться заменить \r\n (возврат каретки + перевод строки) вместо \n (перевод строки). Пример ниже

content.replace(/\r\n/g, '<br>'); 
content.replace(/\n/g, '<br>');
person bart s    schedule 29.06.2012
comment
Большое спасибо. Это очень помогло. - person Leroy Mikenzi; 29.06.2012
comment
Я могу печатать на следующей строке, когда нажимаю ENTER. Но когда я нажимаю ENTER, чтобы перейти к третьей строке, он не вводит соответствующий ей DIV.... что мне здесь не хватает...??? - person Leroy Mikenzi; 05.07.2012
comment
Я думаю, вы имеете в виду, что текст выглядит за пределами div. Это потому, что вы установили высоту на 50 пикселей. Если вы сделаете его min-height вместо height или добавите стиль overflow-y:auto;, он будет выглядеть лучше. - person bart s; 05.07.2012
comment
Спасибо, я понял это. Я сохранил overfow:hidden. я изменил его на overfow:visible - person Leroy Mikenzi; 05.07.2012