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属性“autocomplete”。

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

这会阻止该字段的自动填充。

浏览器自动完成功能不允许复制/加密功能正常工作

2 个答案: