如何格式化信用卡输入字段和到期日期

Question

有没有办法用html / css编写代码？

我想将其格式化为＆＃34; /＆＃34;在到期框中。 我刚放置＆＃34; /＆＃34;在我的网页上的表格中显示我想要做的事情。

Credit Card Number:
<input class="inputCard" type="text" name="creditCard1" id="creditCard1"/>
-
<input class="inputCard" type="text" name="creditCard2" id="creditCard2"/>
-
<input class="inputCard" type="text" name="creditCard3" id="creditCard3"/>
-
<input class="inputCard" type="text" name="creditCard4" id="creditCard4"/>
<br />
Card Expiry:
<input class="inputCard" type="text" name="expiry" id="expiry"/>

我想格式化它，因此它只接受每个信用卡文本框中的四个数字。

我不需要代码来使用javascript验证我的数据（我知道如何做到这一点）。我正在努力使用html设计。

Answer 1

以下代码适用于您，但这不是一个好习惯，因为不同设备中的每个浏览器都不完全支持html5。 （最好使用像http://digitalbush.com/projects/masked-input-plugin/这样的插件）

Credit Card Number:
<input class="inputCard" type="number" min="1000" max="9999" name="creditCard1" id="creditCard1" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999" name="creditCard2" id="creditCard2" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999" name="creditCard3" id="creditCard3" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999"  name="creditCard4" id="creditCard4" required/>
  <br />
  Card Expiry:
  <input class="inputCard" name="expiry" id="expiry" type="month" required/>

http://jsfiddle.net/mastermindw/dUtJV/

Answer 2

我会说这样做：

Card Expiration:
<select name='expireMM' id='expireMM'>
    <option value=''>Month</option>
    <option value='01'>January</option>
    <option value='02'>February</option>
    <option value='03'>March</option>
    <option value='04'>April</option>
    <option value='05'>May</option>
    <option value='06'>June</option>
    <option value='07'>July</option>
    <option value='08'>August</option>
    <option value='09'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select> 
<select name='expireYY' id='expireYY'>
    <option value=''>Year</option>
    <option value='10'>2010</option>
    <option value='11'>2011</option>
    <option value='12'>2012</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

然后只需添加一段Javascript或jQuery即可合并expireMM和expireYY中的值，并将其设置为expiry的值。我更喜欢在PHP中使用服务器端，但这取决于您的确切设置。无论哪种方式，这是处理到期日的常用方法。