I am trying to get autocomplete on a creditcard form to work properly in Safari, however it seems to completely ignore the autocompletion for expiration date. Whether I use cc-exp or separate cc-exp-month/cc-exp-year, neither is working. The autocomplete for cc-name and cc-number are working properly though, as are things working properly in Chrome.
I have been able to bring the issue down to a very simple example:
<form>
<input type="text" autocomplete="cc-name" placeholder="name" />
<input type="text" autocomplete="cc-number" placeholder="number" />
<input type="text" autocomplete="cc-exp" placeholder="expiration" />
<input type="text" autocomplete="cc-csc" placeholder="cvc" />
</form>
What am I missing here? I already tried the older syntax using ID's, names and x-autocompletetype. Neither with any success. Tested on Safari 7 till 10, so this issue seems to be around for a while, or I am really missing something obvious?
(note: to test the example above, make sure you are visiting this page over https, else it would not work anyway)
I was just looking for a solution to this and noticed that on an older form, where I don't even have the autocomplete attribute, it works. The difference between the forms is that on the older form I am using 2 drop-down fields (SELECT tags) for expiry month and year in MM and YYYY formats.
After playing with different options, I concluded that Safari wants 2 separate fields, one for MM and one for YYYY. I now have 2 text fields like this:
<input type="text" name="CCExpiryMonth" id="CCExpiryMonth" value="" placeholder="MM" autocomplete="cc-exp">
<input type="text" name="CCExpiryYear" id="CCExpiryYear" value="" placeholder="YYYY" autocomplete="cc-exp">
This works in Safari.
Related
I know this was answered before but whatever I do, Chrome always shows a list of possible values.
For example, for this field:
<input type='text' id="sFechaCarga" name="sFechaCarga" class="font-12 form-control showCalRanges" autocomplete="off" />
Google thinks this field is a credit card field, showing suggestions for credit cards.
While for this other field:
<input type='text' id="sFechaEstado" name="sFechaEstado" class="font-12 form-control showCalRanges" autocomplete="off" />
Google thinks it is an state value, showing suggestions for states.
I tried to use autocomplete="none" or autocomplete="fdsgsgsg" as someone suggests in some SO threads. I have even used autoComplete="off". None works.
Any help, please?
Regards
Jaime
This is not a perfect solution, but it´s working right now. You should add readonly attribute, and then on focus, remove it. Quite simple, not so beauty (if you need it for lot of inputs, you could try adding it by js to minimize code).
<input type='text' id="sFechaCarga" name="sFechaCarga" class="font-12 form-control showCalRanges" readonly="readonly" onfocus="this.removeAttribute('readonly');" />
Fiddle: http://jsfiddle.net/0uzvqjfg/
The default html date input shows a text field and a option to see the calendar. For accessibility purpose, I need the field to show just the numeric input space and not the calendar option.
I have tried the solution here but this only works for Chrome, IE and firefox still show the calendar.
Since Date Fields have compatibility issues. It is better to work with raw HTML with custom CSS styling. I did it for my projects also and it work fine in many situations. You may try working with this code below.
<div class="DemoClass">
<label for=""><strong>Date (dd/mm/yy)</strong></label>
<input type="number" name="date" min="1" max="30">
<input type="number" name="months" min="1" max="12">
<input type="number" name="years" min="1900" max="2099">
</div>
I'm trying to resolve a Chrome autocomplete aggravation with my small web based work order form. I have tried to use autocomplete="off" in my html code, it doesn't work. When I 'Inspect' my page code in Chrome it always displays autocomplete="on" with autocomplete="off" or other wrong terms for off.
But this user's autocomplete="off" demo works perfectly for me. What am I missing?
My code:
<input name="contact_first" style="border:1px solid #737373"
class="required" id="contact_first" value="<?php echo
$row_contact['contact_first']; ?>" autocomplete="off" size="25" />
Example working code:
<label for="firstName2">First Name (WITH autocomplete):</label>
<input id="firstName2" name="firstName2" autocomplete="off">
I have actually cut and pasted the jsfiddle example code from the working example to a small test web form of mine, autocomplete does not stop.
This may affect other browsers also, but I use Chrome primarily.
Any advice appreciated.
Try to use autocomplete="new-password" to disable the Chrome auto-fill functionality (different from basic autocomplete).
In my angular 4 application I am using some input type=number, but in firefox I can write letters and this isn't what I want.
Why firefox allows this? Is there a way to make it works also in firefox because in chrome works perfectly.
this is my input field:
<label class="control-label">inserttickets <span class="star">*</span>
</label> <input type="number" class="form-control" id="blockFrom"
required [(ngModel)]="blockFrom" min="1" name="blockFrom"
#BlockFrom="ngModel">
I found some old discussions about that but maybe now there are some solutions?
<input id="cell-input" required onChange={this.handleChange} value={this.addDashes(this.state.phone)}
name="cell" placeholder="012-345-6789" type="tel" autocomplete="off"
autoFocus class="hairline text_400 field_type_a field_ph1" />
The markup is a bit different, as it's a react-template being used with reactjs.
As is, this brings up the numeric keypad instead of the phonepad, but only for iOS (I don't actually have an iPhone for testing, so maybe just for iPad as far as I know). I've also tried adding a pattern like "\d*", but to no avail. I still just get the numeric keypad.
Reading this, I assume it should be working for anything iOS - https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/InputTypes.html
Anyone have any ideas?