zdfs / toscani Goto Github PK
View Code? Open in Web Editor NEWThis 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.
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.
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.
This is great!
Would be nice if it could support UK postcodes too? (I suppose you'll get a lot of these requests as this gets more popular!)
One other thing - when you mention:
"Auto-focus only works on the Desktop and stand-alone webapps. iOS won't allow auto-focus within >Safari. However, auto-focus in an iOS stand-alone webapp will feel jumpy due to iOS trying to hide the >keyboard only to have it reappear. No way to just leave the keyboard up while auto-focusing."
Just to confirm - is this why on iOS I have to use the 'next' button on the top left of the keypad to get to the next fields? (ie. the cursor doesn't auto-focus on the next field after one is completed?)
There are few dependencies to this project that would be better served by Bower. Modernizr, normalize, jQuery.
AMEX aside, this only supports 16-digit credit card numbers. There are many other valid lengths for credit cards. Are there any plans to support these?
@hugogiraudel and I both have noticed that CMD/CTRL+A only momentarily selects the field before deselecting the content and placing the cursor at the end of the current content in Chrome (Mac & Windows).
Some possible outcomes:
I use
$('#myField').val()
to get the credit card number. But that only returns the last 4. How do I get the full number? Where is it stored?
Right now, in Firefox, when the transform is applied to the credit card input, you can see slide out of its container, even though the container specifies "overflow: hidden".
There is no ability to select the numbers after entering some. It just deselects immediately.
To reproduce the error:
– enter credit card number -> focus changes to month/year
– enter 12 – 12 as month and year -> focus changes to cvv
– use shift+tab to go back to the month-year-input to change it
ERROR: The "12/12" is selected but cannot be changed anymore
SHOULD: The "12/12" is selected but can be over-written by simply typing new diggits
System:
Google Chrome Version 24.0.1312.57
Note: This might be the same issue as #14 since I have this problem as well…
The fine folks at the Filament Group released an accessible input masking tool, that inserts spacing on blur. http://filamentgroup.com/lab/politespace/
This can be helpful once the user has successfully entered the credit card number
I'm finding an issue with backspacing to be a problem when you go all the way back the credit card field. Once you backspace it either won't let you or it will let you but you can't type in any numbers. Especially past the MM/YY.
Card #, expiry, and CSC are standardized worldwide but ZIP code isn't. I see requests to enable postal codes for Canada (at http://zdfs.github.io/toscani/paymentInfo/index.html) and the UK (at #8) but what about going the other way instead and removing the postal code altogether, or at least providing that as a configuration option?
You should have a look on this JavaScript function to be able to validate or not a credit card number :
https://www.azcode.com/Mod10
May be, you can add a way to call an anonymous function when all the information are successfully completed:
$(".credit-card-group").paymentInfo({onDataComplete:function(data){
//bla bla bla
}});
In Firefox 14 for Mac, when typing digits in the credit card field... groups of digits aren't separated by a space like in other browsers.
So the problem with @aarongustafson's easy field auto advance (https://github.com/easy-designs/jquery.easy-field-auto-advance.js) on iOS is that you can only programmatically focus on a field if the page is a standalone webapp, and even when it works, iOS forces the keyboard down on blur and brings the keyboard up on focus. You can imagine what this feels like.
So what I want to try initially is an idea Alex Maccaw had when Luke W. first posted this demo. The idea is basically a "ghost field" where you have a single field floating on top of the visible fields, accepting input on their behalf. While this could get tricky, I want to first vet the idea in a simplified test for two things:
@toddparker and @aarongustafson - I'm going to be honest here and admit that I suck at accessibility. So off the top of your collective heads, you see any immediate problems with this idea?
If you fill out the credit card field and partially type an expiration date only to tab back to the credit card field, when you finally get back to the expiration date, it won't let you type.
The last digit in most major cards is a check digit (using the LUHN formula, see http://web.eecs.umich.edu/~bartlett/credit_card_number.html). It'd be great if this library included a validity check on the CC#.
It doens't work at all on Windows Phone IE. The numbers don't appear in the field when I type.
PS. I`m using WP v. 8.1.
This was brought over from @marcelluzs from https://github.com/bradfrost/single-field-cc/issues/8
Hi,
just wanted to ask if you'd be interested in developing your service for Paymill (https://paymill.com/en-gb/) ?
If so a msg here would be appreciated (we could discuss details). If not, forget it and could we fork your project to do so?
Best,
Dominic (from Paymill)
Inputs get highlighted with box-shadow after they're filled out in Firefox.
People like me come to the example and try to use the placeholder as their test to see how this works. They are greeted with a invalidating shake of the text box. Perhaps you should use a test credit card number for the placeholder?
From a blog comment:
One thing I noticed is I can't do
ctrl/cmd
+a
thenback
orsuppr
to delete the entire string. I immediatly lose selection. :( It's something I use to do when I have more than one mistake in a field. Running Chrome 34.0.1847.116 Windows 7.
Basically looking for keyboard shortcuts to work to delete the string.
Try to paste card number into the box — nothing happens
Via @thusoy over at the fork: https://github.com/bradfrost/single-field-cc/pull/7
Not sure if this is still relevant for v2, but moving it over here just in case.
If you enter a CC number that isn't valid, it's not possible to to modify it without deleting the either number. Any attempt to use your keyboard to change the cursor position, simply results in being placed back at the end.
Using the mouse, you can place the cursor elsewhere, but if you delete a number and attempt to type a new one, the new number gets placed at the end of the field.
http://postimg.org/image/l5liimhzt/
After adding the credit card number, it tries to auto select the date fields, bit it ends up stuck like the screenshot and you can't type a date. Just try to use it on an iPhone and you'll see what I mean.
On desktop, successful entering of a full credit card number will auto-advance to the month field. On iOS, it doesn't auto-advance any of the fields once they've been successfully filled. This could cause input errors/frustration by the user.
When you tab through the form and fill it out, if you shift tab back to the CVV field, the icon switches to show you the cvv card. But if at that point you tab back to the zip field, the icon doesn't shift back to the card icon.
i'm working on 3 samsung devices and it doesn't accept number input (Kitkat, 4.4.2/4.4.4)..but seems to work on some other versions...
tried on s4 mini, s4, note 3 and s5 and we couldn't enter data, but we could copy and paste info into the field
Submitted by @thusoy over at the fork:
https://github.com/bradfrost/single-field-cc/pull/6
Based on this conversation: https://twitter.com/toddmparker/status/455855655027736576
The basic gist: input masking causes some serious issues for screen readers, so instead of the JS-based input masking, we could dynamically position the input fields and labels to function as a single unit. When the input is validated, it will auto-advance to the next field.
Steps:
Payment Info: Safari is crashing on both Desktop and mobile. Doesn't seem to like the new transitions for the CC. Will need to try something else.
In Firefox 14 for the Mac, you're unable to get to the 2nd side of the field after typing in a credit card number.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.