Browser autocomplete not allowing copy/keyup function to work

Question

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.

possible duplicate of [Detecting Browser Autofill](http://stackoverflow.com/questions/11708092/detecting-browser-autofill) — ozil, Jun 04 '15 at 14:43
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. — Paul, Jun 04 '15 at 14:47

score 2 · Accepted Answer · answered Jun 04 '15 at 14:54

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/

score 0 · Answer 2 · answered Jun 04 '15 at 14:42

0

If i got you right,you just want to prevent autocomplete. You could use the HTML5 attribute "autocomplete".

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

This would prevent autocomplete on that field.

answered Jun 04 '15 at 14:42

Varun

1,946
2
11
17

Yes, this would disable it, but 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. – Paul Jun 04 '15 at 14:47

Browser autocomplete not allowing copy/keyup function to work

2 Answers2

Linked