So Safari offers Scan Credit Card feature on iOS8 with some credit card forms.
My question is, how does Safari determine when to offer this option?
So far I found that this option is available on Amazon and PayPal, but none of my credit card input forms were able to reproduce this behaviour.
After a bit of research with an iOS8 browser and Chrome emulation I figured it out partially. I know of some solutions, but I don't know for sure if there are other ways to do it. You'll have to thank Apple for the amazing lack of documentation around this.
Currently Netflix/Amazon have credit card scanning working properly. So I emulated an iOS8 user agent in my Chrome browser and inspected the markup of their credit card number field. Here's Netflix's:
<input name="cardNumber" smopname="num" id="cardNumber-CC" class="cardNumber" type="text" value="************0891" pattern="[0-9]*">
And here's Amazon's:
<input name="addCreditCardNumber" size="20" maxlength="20">
At that point I played around with a form served over HTTPS that I had control over and started setting attributes to see what would happen. Below, "works" means "successfully triggered card scan" and "doesn't work" means "did not trigger card scan":
name="addCreditCardNumber" => works
name="cardNumber" => works
name="cardnumber" => works
class="cardNumber" => does not work
type="cardNumber" => does not work
id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear" => works
Since the name attribute drives form data and might impact the way server-side form processing works I highly recommend triggering credit card scan by setting your input id to cardNumber.
I would link to the relevant documentation...but hey! There's none (at least, not that I know of)
I think your better bet is to use HTML5 Autocomplete Types on your inputs.
Stick to the credit card related types, and most modern browsers will auto recognize these fields for you, including Mobile Safari and the "Scan Credit Card" feature. Bonus is that you'll always get the correct keyboard on mobile devices too.
Example (note autocomplete, x-autocompletetype, and pattern attributes):
<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number" pattern="\d*">
<input type="text" id="cc-name" autocomplete="cc-name" x-autocompletetype="cc-full-name">
I also wrote a related blog post on this topic and built an HTML5 Autocomplete Cheatsheet.
In addition to Arnaud Brousseau's answer, a search for "card number" in the iOS simulator files yields this file:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared
A quick run of strings on it reveals these strings which are certainly used for matching potential fields:
card number
cardnumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
card#
card #
cvc2
cvv2
ccv2
security code
card verification
name on credit card
name on card
nameoncard
cardholder
card holder
name des karteninhabers
card type
cardtype
cc type
cctype
payment type
expiration date
expirationdate
expdate
and a bit further:
month
date m
date mo
year
date y
date yr
Can't quite see (with this naïve approach) any references to which attributes (id, name, placeholder...) or other metadata (label maybe?) are actually compared against this list. Also, with the exception of "name des karteninhabers", this is really very english-oriented, that's quite unusual for Apple IMHO.
Thanks to #barbazoo, the Scan Credit Card option will be available over https with a valid (not self signed) certificate.
For the expiration fields, based on Arnaud's answer, I found that the expiration fields would be recognized from cardExpirationYear and cardExpirationMonth being in the id attribute.
This worked when the year and month are regular text inputs with the appropriate IDs. The month is populated as a 2-digit number and the year as a 4-digit number.
In a quick test using <select> tags, I found that it also populated the correct month and year.
<input type="text" id="cardNumber" placeholder="CC number">
<select id="cardExpirationMonth">
<option value="01">01</option>
<option value="02">02</option>
...
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="cardExpirationYear">
<option value="2014">2014</option>
<option value="2015">2015</option>
...
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
I don't know what other values will work in the option tags.
It's not about when, it's about how we can enable this feature in Safari browser.
Let's just talk about what happens when a form is submitted:
Some browsers stores all input values with it's name attribute. And it will offer to autocomplete those fields when it encounters same named input elements.
Some browsers scan for just autocomplete attribute for offering auto-completion and,
Some others scan for an attribute like label or name for input elements too.
Now, autocomplete attribute can have a larger set of values including cc-name (Card name), cc-number, cc-exp, cc-csc (Security number - CVV) etc. (full list here)
For example, we could say to a browser that, this is card number field and it should offer autocomplete when possible and it should enable scan credit card feature as:
<label>Credit card number:
<input type=text autocomplete="cc-number">
</label>
In general:
<input type="text" autocomplete="[section-](optional) [shipping|billing](optional)
[home|work|mobile|fax|pager](optional) [autofill field name]">
more detailed ex:
<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">
And each autocomplete values goes like this:
section-red : wrapping as a section. (named red)
shipping : shopping/billing
mobile : home|work|mobile|fax|pager (For telephone)
tel : [Tokens][2]
When we code it like this browser know exactly what kind of value should be populated in that field.
But browser like safari need name or id or label values should also be set right.
Support so far for autocomplete, id and name attributes for auto-completing values.
Browse Ver OS ID Name Autocomplete
Chrome 50 OS X 10.11.4 No Yes Yes
Opera 35 OS X 10.11.4 No Yes Yes
Firefox 46 OS X 10.11.4 Yes Yes No
Edge 25 Windows 10 No Yes No
Safari 9.1 OS X 10.11.4 Partial Partial Partial
Safari 9 iOS 9.3.1 Partial Partial Partial
There are more things at play here. I strongly recommend this blog I referred.
I've found that something like this works, but I consider this a very ugly solution, since it depends on the actual displayed text between the label tags:
<html>
<head>
<title>AutoFill test</title>
</head>
<body>
<h1>AutoFill test</h1>
<h2>revision 4</h2>
<form action="#">
<input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
<input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
<label>Expiration date</label>
<input type="text" name="expirationMonth" id="id3" maxlength="2">
<input type="text" name="expirationYear" id="id4" maxlength="2"><br>
<input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
</form>
</body>
</html>
I am not entirely sure, but I think, that name parameters are not important.
This is now all broken after upgrading to iOS 8.1.3 this morning. When on iOS 8.1.2 all of the above worked just fine - now the keyboard option to scan credit card simply does not appear. Here's my code, which did work yesterday on iOS 8.1.2 and does not work today on iOS 8.1.3:
<html>
<head>
<title>Scan credit card using iOS 8</title>
<style type="text/css">
input {height:1.5em;width:95%}
input[type="number"] {font-size: 2.5em}
body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
#purchase {font-size: 2em;font-weight: bold;height:1.2em}
</style>
</head>
<body>
<form action="https://yoursite.com/credit-card-purchase" method="POST">
Credit Card Number 1<br />
<input type="number" autocomplete="cc-number" name="cardNumber" id="cardNumber" value="" placeholder="*** **** *** ****" />
<br />
Expiry month <br />
<input type="number" name="expirationMonth" id="cardExpirationMonth" />
<br />
Expiry year <br />
<input type="number" name="expirationYear" id="cardExpirationYear" />
<br />
<br />
<input type="submit" value="Purchase" id="purchase">
</form>
</head>
</html>
Even after using the autocomplete and ID methods described above, I had a label at the top of my page with the value Credit / Debit / Gift Card that prevented iOS from offering the Scan CC option. I ended up adding this label above my CC number field to trick iOS into offering the Scan CC option:
<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>
Opacity of 0, or a font-size of 1pt prevents iOS from offering the option.
Related
I have a ruby on rails website which is designed mobile's view. In this web, I have 2 input: email and zip code which is define input[type=email] and input[type=tel] respectively. I checked this view in Safari browser and 2 above inputs work correctly - it mean the keyboard display # in email field and numeric keyboard in zip code field. I used this website (or webview exactly) to make IOS webview application, however 2 above inputs is still input[type=text] and the keyboard only display text keyboard. This is html my code:
- email field:
<input type="email" name="user_email" id="user_mail" maxlength="300" size="30" >
zip code field:
<input type="tel" name="zip_code" id="zip_code" maxlength="8" size="10" placeholder="1050001" >
What are reasons and solution of this issue? Please help me. Thank you.
For iOS webview to display numeric only, you have to have pattern="[0-9]*" at the zip code field.
<input type="tel" name="zip_code" pattern="[0-9]*" id="zip_code" maxlength="8" size="10" placeholder="1050001">
Reference: iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes
I have been using the input type="date" form element but have found that the "Clear" option visible on the iOS datepicker behaves like a "reset" and that there is actually no way to clear a date value.
This happens with both Chrome & Safari on iOS.
I created a codepen that illustrates this (providing you access it with an iOS device or simulator) here:
https://codepen.io/ajwgibson/pen/oPGvBB
<html>
<body>
<form>
<label for="the_date">The date:</label>
<br/>
<input type="date"
value="2018-09-06"
placeholder="dd/mm/yyyy"
name="the_date"
id="the_date">
</form>
</body>
</html>
Is there a workaround for this or do I need to revert to a JavaScript datepicker rather than relying on the HTML5 date input type for iOS users?
I am outputting a DateTime to a string format of MM/dd/yyyy to an text input field. This works fine on all browsers except latest version of Safari (on Yosemite, if that matters). See examples below:
This code:
<div><input type="text" value='#Model.Arrival.Value.ToString("MM/dd/yyyy")' /></div>
<div><input type="text" value="#Html.Raw(Model.ArrivalDateString)" /></div>
<div><input type="text" value="8/23/2015" /></div>
<div><input type="text" value="08/23/2015" /></div>
Produces this:
The test page I setup for this has absolutely nothing else running on it. It's just a bare bones HTML page with server side output from a view model. MVC 5 and .net framework 4.5.1
Viewing page source, it looks like this in Safari:
<input type="text" value="08-20-2015" />
On other browsers, it is this:
<input type="text" value="08/20/2015" />
UPDATE: It looks like .NET is choosing a different culture / format for Safari browsers. A possible fix is to specify a format provider.
I was able to fix the issue by specifying a culture for the string format. ie.:
DateTime arrival = DateTime.Now;
CultureInfo invariant = CultureInfo.InvariantCulture;
string dateString = arrival.ToString("MM/dd/yyyy", invariant);
en-US works as well. Still not sure why this happens. It looks like ASP.NET is doing something different based on the user agent. The request headers otherwise looks like same.
I would've figured this out earlier if I was able to get browserstack to work locally.
iOS 8.0/8.0.1/8.0.2 has this problem.
I have a page with 70 simple text inputs:
<input class="" type="text">
On iOS 7 the page has no problems. But on iOS 8, selecting and typing in a field causes the iPad to become slow and laggy.
You can see an example of the problem in this jsFiddle
Does anyone know a fix to this problem???
Seems the issue is related to the number of text inputs which are part of the document or a form.
I "fixed" the issue by placing <form> tags around small groups of text inputs.
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
etc.
In some cases I had large tables with individual text fields in the <td> elements. You can't include <tr> or <td> elements in a form but rather must include the whole <table> or the content of individual <td> elements. In those cases I had to place a <form> element around each text input.
<table>
<tr>
<td>
<form>
<input type="text">
</form>
</td>
<td>
<form>
<input type="text">
</form>
</td>
</tr>
etc....
</table>
Update: This appears to be resolved in the iOS 8.1.1 beta. It appears not to be fixed, based on comments. :(
It's also in the 8.1 betas. You should file a radar.
Some stuff causes the entire webpage to reload or Safari to hang. For example, visit http://getemoji.com/ and start typing in the search box. You can't do it on an iOS 8.x device without the page reloading.
Notably, Chrome and Mercury work fine, so you could suggest that your users switch to third-party browsers based on UIWebView. (I didn't test out WKWebView.)
I've been struggling with this for many hours until I found the solution on this page. Thanks! This is my implementation of solution suggested by Design Navigator:
$(document).ready(function(){
var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS');
if (isSafari){
$('#container input[type="text"]').wrap('<form />');
}
}
I am working on JQuery Mobile Datebox and there is something i can't fix. If user type some weird input in year area something like 1988123, datebox gets crazy and changes value of date "undefined, undefined NaN, NaN".
I tried the get only year value from Datebox, but day, month or year area doesn't have id field. So I couldn't get any solution. Can anybody help me?
try HTML5 pattern:
<form
onsubmit="alert('Submitted.');return false;">
<input
type="text"
required=""
pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
value=""
name="dates_pattern2"
id="dates_pattern2"
list="dates_pattern2_datalist"
placeholder="Try it out.">
<input
type="submit"
value="»">
<datalist
id="dates_pattern2_datalist"></datalist>
</form>
Finally I did find a solution.
As you know, JQuery Mobile Datebox has some data-options. I find an option which is "maxYear".
<input name="tarih1" id="tarih1" type="date" data-role="datebox" data-options='{"mode": "datebox", "maxYear":"3000"}' placeholder="GG.AA.YYYY">
With this solution, user can't choose a year which has more than 4 digit. (You can change 3000 to another 4 digit year. Bu don't forget, if you choose for example 1999, user can't choose greater than 1999)