javascript - 浏览器自动完成功能不允许复制/键盘功能工作

Question

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

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

<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>

这是我稍后在页面下方显示代码的位置。如果在输入送货信息时完成浏览器自动完成，则不会显示此内容。

   <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>

有什么方法可以改变它，以便它可以以任何方式工作吗？

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

Answer 1

一个快速解决方案:将事件监听器添加到 input事件而不是 keyup事件。来自 MDN reference page :

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed

所以代码会是这样的:

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

我制作了一个更改名称的演示，以便我的浏览器能够检测自动填充字段。您可以在这里看到它:http://jsfiddle.net/dc3x6wyu/