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

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：

当<input> 或<textarea> 元素的值改变时，DOM 输入事件被同步触发

所以代码应该是这样的：

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

我做了一个更改名称的演示，这样我的浏览器就会检测到自动填充的字段。你可以在这里看到它：http://jsfiddle.net/dc3x6wyu/

Answer 2

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

<input type="text" autocomplete="off">

这将阻止该字段的自动完成。