javascript – 在输入中输入数据,然后仅显示在页面上其他位置输入的文本

我正在创建一个结帐页面,我无法弄清楚如何执行以下操作.当客户输入他们的送货信息时,我想在确认部分的页面下方显示相同的信息.在客户下订单之前我不会提交信息,所以没有办法回应这些信息,因为在提交之前我不会提交给我的数据库.

我调查了这个并且我看到了具有数据复制功能的东西,这基本上是我需要的,除了我不希望复制的数据显示在输入字段中.我只是想让它显示文字.

所以,如果我有以下字段:

航运街道:
123 Main St.

我希望123 Main St出现在页面的不同部分.

我试过做数据复制功能,我甚至无法让它工作.我不确定这是否是最好的方法.我不希望复制的数据可以编辑.我从我的代码中禁用了它.

我试过这样做:

<div class="field">
    <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text"  class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required>          </div>
</div>

这是页面下方的确认部分:

<p><input type="text" class="preview" id="name" disabled></p>

Jquery

$(document).ready(function() {
$(".preview").keyup(function() {
     var ElemId = $(this).data('copy');
    $("#"+ElemId).val($(this).val());
 });
});

有没有更好的方法可以做到这一点,最重要的是输入字段不会显示复制的数据?

更新的代码

<div class="center">
    <div class="field">
        <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
    </div>

确认部分

<p>Shipping to:</p>
    <p><div class="preview" id="name"></div></p>

Jquery

$(document).ready(function() {
 $(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
 });
});
最佳答案
这是你想要的吗?

请注意,data-copy =“name”现在应该是data-copy =“#name”才能生效

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="field">
  <label class="paddingleft" for="fullname">Full Name</label>
  <div class="center">
    <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
  </div>
</div>

<br>

Your name is:
<div id="name"></div>

转载注明原文:javascript – 在输入中输入数据,然后仅显示在页面上其他位置输入的文本 - 代码日志