search

zdfs / toscani

This is a jQuery-based, progressively-enhanced solution for creating a single-field credit card input. The idea is to create a more streamlined credit card entry process.
872 stars 102 forks source link

Doesn't auto skip to next field in iOS8 #34

Open tannyo opened 9 years ago

tannyo commented 9 years ago

Enter the credit card number and the mask moves over, but the input is still in the credit card field. If you tap the > (arrow) the cursor moves back to the date field and you can enter the date. If you do not tap the next field button it will give you an invalid credit card number.

caseydriscoll commented 9 years ago

There is a problem with window.navigator.standalone and !Modernizr.touch both evaluating to false. I hope to investigate and find a solution tomorrow.

console.log( 'window.navigator.standalone: ', window.navigator.standalone );
console.log( 'Modernizr.touch: ', Modernizr.touch );

214: if (window.navigator.standalone || !Modernizr.touch) {
    // Focus on the credit card expiration input.
    $("." + opts.cardExpirationClass).focus().val($.trim($("." + opts.cardExpirationClass).val()));

    // Update instruction message
    helpers.updateInstruction(opts.messageExpiration);
}
caseydriscoll commented 9 years ago

Yeah after some research I'm not sure what the intent was.

window.navigator.standalone returns true only for 'full screen' ios web apps, I believe when the page is saved to the icon screen. http://www.bennadel.com/blog/1950-detecting-iphone-s-app-mode-full-screen-mode-for-web-applications.htm

Modernizr.touch returns true for iOS devices, but the ! negates it, meaning for only non-touch screen environments.

These conditions only allow for non-touch devices or a touch device in full screen mode. For whatever reason, they didn't want to allow it for normal safari iOS browsing, as far as I can tell.

The (window.navigator.standalone || !Modernizr.touch) condition happens in 6 places, I just commented it out and it appears to be working fine. Your mileage may vary.