JQueryMobile和信用卡输入(JQueryMobile and Credit Card Entry)

JQueryMobile和信用卡输入(JQueryMobile and Credit Card Entry)

JQueryMobile是否对输入信用卡信息有很好的支持。 用户真的很难输入16位数字，然后是到期日期等。我希望看到一个很好的JQueryMobile视图示例，了解如何输入信用卡/奖励卡详细信息。 有关在此过程中保持Android键盘正确定位的建议吗？

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?

最满意答案

您应该能够按照演示示例进行操作：

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

在卡的背面（有时是正面）输入16位数的安全代码

http://jquerymobile.com/demos/1.1.0/docs/forms/textinputs/ http://www.w3schools.com/tags/att_input_maxlength.asp (最大长度） http://www.w3schools.com/html5/att_input_placeholder.asp （可选占位符）

示例（注意：密码字段中的字符被屏蔽[显示为星号或圆圈]）：

<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">

如果您不喜欢密码选项，可以使用掩码功能，不确定是否有任何插件可以“掩盖以前的输入字符onblur掩码全部”，但这样做会很好

JQuery将输入掩码应用于字段onfocus并删除onblur，以避免占位符文本出现问题

截止日期的DateBox

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

也许还要添加一些信用卡验证？

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

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