7

これをhtml/cssでコーディングする方法はありますか?

有効期限ボックスの「/」の両側に2桁になるようにフォーマットしたいと思います。Webページのフォームに「/」を配置して、何をしようとしているのかを示しました。

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

各クレジット カードのテキスト ボックスで 4 つの数字のみを受け入れるようにフォーマットしたいと考えています。

クレジットカードフォーム

javascript でデータを検証するためのコードは必要ありません (これを行う方法は知っています)。HTMLのデザインで悩んでいます。

4

2 に答える 2

5

私はこのようなことを言うでしょう：

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='20'>2020</option>
    <option value='21'>2021</option>
    <option value='22'>2022</option>
    <option value='23'>2023</option>
    <option value='24'>2024</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

次に、Javascript または jQuery を追加して、 と の値を結合し、 の値expireMMとしてexpireYY設定しますexpiry。PHPですべてサーバー側で行うことをお勧めしますが、それは正確な設定によって異なります。いずれにせよ、これは有効期限を処理する一般的な方法です。

于 2013-06-10T05:55:05.317 に答える
-1

次のコードは機能しますが、異なるデバイスのすべてのブラウザーで html5 が完全にサポートされているわけではないため、お勧めできません。( http://digitalbush.com/projects/masked-input-plugin/のようなプラグインを使用することをお勧めします)

Credit Card Number:
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard1" id="creditCard1" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard2" id="creditCard2" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard3" id="creditCard3" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard4" id="creditCard4" required/>
      <br />
      Card Expiry:
      <input class="inputCard" name="expiry" id="expiry" type="month" required/>

https://jsfiddle.net/mastermindw/sa4dcLu7/

古い解決策（バグが含まれており、先行ゼロを許可していません。@kristopolous に感謝します） http://jsfiddle.net/mastermindw/dUtJV/

于 2013-06-10T05:25:52.447 に答える