需要用表格实时填写小册子预览答案

【问题标题】：Need to fill a brochure preview in real time with a form需要用表格实时填写小册子预览
【发布时间】：2015-01-29 03:50:56
【问题描述】：

我们有一个使用 asp.net 和 VB.net 作为背后代码的 Web 应用程序。我正在学习 javascript。

我有 2 个并排的 div。第一个 div 包含 ASP 下拉菜单和文本框，例如（营地名称、注册费、开始和结束日期）。

在第二个 div 上，我有一个正在创建的新营地的预览，上面有指示营地名称、开始和结束日期等的标签。

我的问题是，如何使用JavaScript（ajax和JQuery也可以）将第一个div输入的信息实时填写到第二个div？

例如，当有人在第一个 div 上输入营地名称，然后在外面点击或从营地名称文本框跳出标签时，小册子 div 上的相应标签会被填写？

换句话说，当营地名称文本框失去焦点时，第二个 div 上的营地名称标签应该被填充。

如果我使用尽可能少的代码并完全在客户端完成这将是可取的。

【问题讨论】：

客户端是很好的选择，并且在 keypressdown/keypressup 事件而不是焦点上执行此操作？...这样您可以在用户输入时轻松显示...包括您的内容尝试到现在，我们可以为您提供进一步的帮助
查找 onchange event 这将为您解决问题。如果您编写了一些示例代码，但它无法正常工作或无法按照您的预期工作，请在此处发布，我们将进行查看。这就是 SO MO。
Onchange 事件非常适合静态下拉列表，但不适用于 asp:DropDownLists。这是设计使然吗？我假设它是。

标签： javascript jquery html asp.net ajax

【解决方案1】：

这是sample code

用一个文本框添加两个 div，用 Span 添加另一个

<div id="myExample1">
    Div 1 <input id="myInputText1" type="text" name="inputBox1" />
    </div>
<br/>
<div id="myExample2">
    Div 2 <span id="myText2" type="text" name="myText2" />
</div>

现在使用此 jquery 代码来实现所需的结果，因为用户键入查看 span 中的文本框值

$(document).ready(function() {
     $('#myInputText1').keyup(function() {
          $('#myText2').html($(this).val());             
   });
});

【讨论】：

这是为我做的。谢谢@Piyush 对不起，我工具这么久才标记为答案，被跟踪了。