JQueryMobile and Credit Card Entry

Question

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?

Answer 1

You should be able to follow the demo examples:

• http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all.html

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

• JQuery apply input mask to field onfocus and remove onblur so to avoid problems with placeholder text

DateBox for the Expiration Date

• http://dev.jtsage.com/jQM-DateBox/

Maybe add some Credit Card validation as well?

• http://paweldecowski.github.com/jQuery-CreditCardValidator/
• http://docs.jquery.com/Plugins/Validation/Methods/creditcard