从表单实时更新数据

Question

我有一个动态表单，用户可以输入收据数据。我试图克隆他们在一个单独的 div 上输入的内容，该 div 的设计看起来像他们输入的收据。我想显示文本的值并将元素选择到该单独的 div 中。

我试图在 jquery 中做到这一点。有人有例子吗？

编辑

问题是我不知道如何获取 div id，因为它是动态生成的。

Answer 1

我建议使用 keyup 事件。假设您像这样设置输入字段和 div：

<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);
});

稍后可以通过为receipt_no keyup 和其他表单元素的更改事件（例如下拉列表）添加通用函数来使其变得更复杂。您只需使用预览所需的所有元素来构造 Preview_text 即可。

Answer 2

这是一个简单的示例：

HTML:

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

<div id="previewDiv"><div>

js:

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