javascript - 在输入中输入数据，然后只显示在页面其他地方输入的文本

Question

我正在创建一个结帐页面，但我不知道如何执行以下操作。当客户输入他们的运输信息时，我想在页面下方的确认部分中显示相同的信息。在客户下订单之前我不会提交信息，因此无法回应此信息，因为在他们提交之前我不会提交到我的数据库。

我对此进行了调查，发现具有数据复制功能，这基本上就是我所需要的，只是我不希望复制的数据显示在输入字段中。我只是想让它显示文本。

所以如果我有以下字段:

航运街: 123 主街

我希望 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());
 });
});

Answer 1

这是你想要的吗？

请注意，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>