обновление данных в режиме реального времени из формы

Question

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

Я пытался сделать это в jquery.У кого-нибудь есть пример?

edit

Проблема в том, что я не знаю, как получить идентификатор div, потому что он генерируется динамически.

Answer 1

Вот простой пример:

HTML:

<div id="inputDiv">
<textarea></textarea>
<div>

<div id="previewDiv"><div>

ЯШ:

$(function(){
  $("#inputDiv textarea").keydown(function(){
    $("#previewDiv").text($(this).value());
  });
});

Answer 2

Я бы предложил использовать событие keyup.Предполагая, что вы настроили свое поле ввода и делители следующим образом:

<input type="text" id="receipt_no" />
<p>Preview:</p>
<div id="preview"></div>

Вы можете сделать следующее в jQuery:

$('#receipt_no').keyup(functon () {
    var preview_text = $(this).val();
    $('#preview').html(preview_text);
});

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