Does JQueryMobile have good support for entering credit card information. Users have a really difficult time entering 16 digits and followed by expiration dates etc. I would like to see a good JQueryMobile view example of how to enter credit card/reward card details. Any suggestions for keeping the Android keyboard properly positioned during this process as well?
Asked
Active
Viewed 2,215 times
1 Answers
2
You should be able to follow the demo examples:
Input for the 16 digit, Security Code on the back ( sometimes front ) of the card
- http://jquerymobile.com/demos/1.1.0/docs/forms/textinputs/
- http://www.w3schools.com/tags/att_input_maxlength.asp ( Max Length )
- http://www.w3schools.com/html5/att_input_placeholder.asp ( optional Placeholder )
Example ( Note: The characters in a password field are masked [shown as asterisks or circles] ):
<input type="password" name="credit_card_number" id="credit_card_number" value="" placeholder="1234567890123456">
<input type="password" name="security_code" id="security_code" value="" placeholder="123">
You could use a mask feature if you don't like the password option, not sure if there are any plugins to 'mask previous input character onblur mask all' but that would make for a nice one
DateBox for the Expiration Date
Maybe add some Credit Card validation as well?
Community
- 1
- 1
Phill Pafford
- 83,471
- 91
- 263
- 383
-
Did you mean to say that a `type="password"` form input is good for the 3 digit security code? Which BTW is sometimes located on the front of the card :) Good answer though. There isn't really a all-in-one solution but using these attributes/controls is going to help. – Jasper Jun 15 '12 at 20:50
-
@Jasper yeah using input type password would mask the numbers for security, updated my answer with an example – Phill Pafford Jun 15 '12 at 21:00
-
I've got a beef with that :) I hate when you're 10 digits into a number and then the password input takes over and hides your last digit, and all you can do is start-over... Just my 2 cents. – Jasper Jun 15 '12 at 21:02
-
@Jasper I do like how iOS masks the previous characters and on blur mask all but haven't found or made a plugin for that yet – Phill Pafford Jun 15 '12 at 21:09
-
This is a great question - i'd be very interested in any sort of good ideas of what credit card entry *should* be like on mobile - that would make a lovely plugin. And I totally agree with @Jasper - password masking the CC# is incredibly frustrating sometimes. – J.T.Sage Jun 16 '12 at 02:20