Javascript 浏览器自动完成不允许复制/键控功能工作

我写的一些代码有问题。我正在做的是，我正在创建一个电子商务结账页面，我有三个不同的部分。 1.运输信息 2.账单信息 3.订单确认信息

我编写的代码基本上是复制shipping info部分中编写的内容，并在页面下方的order confirmation部分显示出来，这样他们就可以在订购之前确认。按照我的方式，如果运输信息表单中的信息是正常输入的，那么效果会很好。但是，如果客户双击其中一个输入字段并允许浏览器自动完成信息填写，那么这将禁用我的代码，并且它将不会显示在订单确认信息部分

<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>
<div class="field">
    <label class="paddingleft" for="streetline1">Street Line 1</label>
    <div class="center">
        <input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required>
    </div>
</div>

全名
街道1号线

这就是我稍后在页面下方显示代码的地方。如果在输入装运信息时浏览器自动完成，则不会显示此信息

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

配送至：

JQuery

<script>

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});
</script>

$（文档）.ready（函数（）{
$（“.preview”）.on（'keyup'，function（）{
$（$（this.data（'copy'））.html（$（this.val（））；
});
});

有没有什么办法可以改变这一点，使它的工作方式

---

根据评论，这是一个重复-理想情况下，我不想禁用自动填充功能，因为它是一个伟大的功能。我希望我的代码能够使用它。

如果我没弄错，您只想阻止自动完成。 您可以使用HTML5属性“自动完成”

---

一个快速解决方案：将事件侦听器添加到

输入

事件中，而不是添加到

键控

事件中。从：

当

或

元素的值更改时，将同步触发DOM输入事件

所以代码是这样的：

$(document).ready(function() {
  $(".preview").on('input', function() {
    $($(this).data('copy')).html($(this).val());
  });
}); 

---

我做了一个更改名称的演示，这样我的浏览器就可以检测自动填充的字段。您可以在这里看到：

理想情况下，我不想禁用自动填充功能，因为这是一个很好的功能。我希望我的代码可以使用它。是的，这会禁用它，但理想情况下，我不希望禁用自动填充功能，因为它是一个很好的功能。我想让我的代码和它一起工作。工作完美！谢谢