При вводе текста в поле ввода текста печатайте содержимое, набранное в div

У меня есть веб-сайт, на котором есть пустое поле и текстовое поле ввода. Я хочу, чтобы иметь возможность ввести что-то в этом поле ввода и напечатать его в пустом поле.

HTML

<div class='printchatbox'></div>

который является пустым полем и

<input type='text' name='fname' class='chatinput'>

который является полем ввода.

CSS

.printchatbox 
    {border-width:thick 10px;border-style: solid; 
    background-color:#fff;
    line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
    border: 3px solid #969293;width:40%;}

Если бы кто-нибудь мог сказать мне, как это сделать, я был бы очень признателен. Благодаря

Ответы

Ответ 1

Вы используете событие onkeyup

Поиск с помощью идентификаторов намного проще. Добавьте идентификаторы в свои элементы следующим образом:

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' id='chatinput'>

JS

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

Вот пример Live

Ответ 2

http://jsfiddle.net/3kpay/

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />

Ответ 3

Есть много способов сделать это, возможно, проще всего использовать jQuery. В приведенном ниже примере я использую функцию jQuery keyUp() для прослушивания событий клавиатуры, затем записывая обновленное значение в .printChatBox

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>

  <div class='printchatbox'>CHANGE ME</div>
  <input type='text' name='fname' class='chatinput'>

<script type="script/javascript">
  $('.chatinput').keyup(function(event) {
    newText = event.target.value;
    $('.printchatbox').text(newText);
  });
</script>
</body>
</html>

Я написал здесь рабочий пример: http://jsbin.com/axibuw/1/edit

Ответ 4

В вашем HTML

<div id='printchatbox'></div>
<br>
<input type='text' id='fname' class='chatinput' onkeyup="annotate()">

В JS,

function annotate(){
  var typed= document.getElementById("fname").value;
  document.getElementById("printchatbox").innerHTML= typed;
}

Нажмите здесь для LIVE DEMO

Ответ 5

Это показывает ошибку, говоря, что MyId не определен.

Ответ 6

Angular JS делает это в двух строках кода:

Просто импортируйте Angular JS при импорте других библиотек:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">

Затем на первом div (где вы копируете):

<input type="text" ng-model="myID"> </input>

Затем, на том месте, где вы покажете контент: просто напишите:

<div> {{myID}}</div>

Это лучшее решение, которое я когда-либо нашел!