浏览器自动完成不允许复制/键入功能工作 [英] Browser autocomplete not allowing copy/keyup function to work

问题描述

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

我写的代码基本上是要复制什么被写入运输信息部分，并显示在页面下方的订单确认部分，因此他们可以在订购前确认。我拥有它的方式，如果运输信息表单中的信息正常输入，它就会很好用。但是，如果客户在其中一个输入字段中双击并允许浏览器自动填写信息，那么这会禁用我的代码，并且它不会显示在订单确认信息部分中。

 < div class =field> 
< label class =paddingleftfor =fullname>全名< / label> 
< div class =center> 
< input type =textclass =biginputbarinline previewid =ShipToFullnamedata-copy =＃namename =ShipToFullnamerequired> 
< / div> 
< / div> 
< div class =field> 
< label class =paddingleftfor =streetline1> Street Line 1< / label> 
< div class =center> 
< input type =textclass =biginputbarinline previewid =ShipTostreetline1data-copy =＃address1name =ShipTostreetline1required> 
< / div> 
< / div> 
  

这是我在后面显示代码的地方。如果在输入送货信息时浏览器自动完成已完成，则不会显示。

 < p>运送至：< / p为H. 
< p>< div id =name>< / div>< / p> 
< p>< div id =address1>< / div>< / p> 
  

JQuery

 <脚本> （'keyup'，function（）{
 $（$（this（））。
 $（document）.ready（function（）{
 $（。preview）。 ）.data（'copy'））。html（$（this）.val（））; 
}）; 
}）; 
< / script> 
  

有没有什么办法可以改变这种情况？

根据评论这是重复的 - 理想情况下，我不打算禁用自动填充功能，因为它是一个很棒的功能。我想让我的代码和它一起工作。

解决方案

快速解决方案：将事件侦听器添加到输入事件，而不是输入 keyup 事件。从 MDN参考页面：

当< input> 或< textarea> 元素被更改

所以代码会是这样的：

$（）。

  $（document）.ready（function（）{
 $（。preview）。on（'input'，function （）{
 $（$（this）.data（'copy'））。html（$（this）.val（））; 
}）; 
}）; 
  

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

I am having an issue with some code I wrote. What I am doing is, I am creating an eCommerce checkout page and I have three different sections. 1. Shipping info 2. Billing info 3. Order confirmation info

The code I wrote is to basically to copy what was written in the shipping info section and show it in the order confirmation section farther down the page, so they can confirm that before ordering. The way I have it, it works great if the information in the shipping info form was typed in normally. But, if the customer double clicks in one of the input fields and allows the browsers auto-complete fill in the information, then this disables my code and it will not show up in the order confirmation info part.

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

This is where I show the code later down the page. This will not show up if the browser autocomplete was done when entering the shipping info.

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

Is there any way I can change this, so that it works either way?

Per the comment that this is a duplicate - Ideally I'm not looking to disable the auto fill feature as it is a great feature. I want my code to work with it.

解决方案

One quick solution: add the event listener to the input event instead of to the keyup event. From the MDN reference page:

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

So the code would be like this:

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

I made a demo changing the names so my browser would detect the fields for autofill. You can see it here: http://jsfiddle.net/dc3x6wyu/

这篇关于浏览器自动完成不允许复制/键入功能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！