Stop Safari on iOS7 to save map data

Question

I have a client site that asks them to save map information in iOS7. I can’t say absolutely nothing about how or what makes iOS decide that this is the right thing - does anyone have any ideas?

Answer 1

We encountered this exact problem. As Guy Thomas noted, this is due to the presence of password fields in the CC field form.

After many tests, I decided that the password fields can be switched to another type before submitting the form (in our case, I simply switched to hidden ). This allowed us to submit the form even after selecting “Not Now” in the dialog box.

 $("#submit").on("click", function(){ try{ $("input[type=password]").attr("type", "hidden"); } catch(ex){ try { $("input[type=password]").prop("type", "hidden"); } catch(ex) {} } }); 

I added try / catch, because depending on the version of browser / jquery changing the type attribute will be an error.

Answer 2

Having done quite a lot of testing on this, I decided that some kind of analysis of the data actually entered by the user is being performed. I deleted all credit card links, number, cvv, etc. And still getting the icloud keychain popup when I entered the number of the “real” card. As soon as I started typing “1234567890123456” and the like, a popup will not be displayed.

It was more problematic when the user clicked "not now", the form could not be submitted without a full page refresh. I traced this to a form having an input of type = "password". As soon as I changed the type to “text”, the form will be correctly submitted after the user clicked “not now”.

Answer 3

Add autocomplete="off" both your input and the form, and it will stop saving your input.

Answer 4

It seems that Safari needs some help that you send with credit card information. If you control the name of the form elements, then call the elements something non-credit card related:

This causes autocomplete:

 <form action="test" method="post" id="credit"> Name:<input type="text" name="cardholder" /> <br/> Credit Card Type: <select name="cardtype" > <option></option> <option value="amex">amex</option> <option value="visa">visa</option> <option value="mastercard">mastercard</option> </select> <br/> Credit Card:<input type="text" name="cardnumber" /> <br/> Expiration:<input type="text" name="expirationdate" /> <br/> <input type="submit"> </form> 

This does not suggest:

 <form action="test" method="post" id="credit" autocomplete="off" > Name:<input type="text" name="h" autocomplete="off" /> <br/> Credit Card Type: <select name="t" autocomplete="off" > <option></option> <option value="amex">amex</option> <option value="visa">visa</option> <option value="mastercard">mastercard</option> </select> <br/> Credit Card:<input type="text" name="n" autocomplete="off" /> <br/> Expiration:<input type="text" name="d" autocomplete="off" /> <br/> <input type="submit"> </form>