テキスト入力の自動遷移 - 徒然なるままに

クレジットカードの番号とかを入力するときにテキスト入力を自動遷移させたいことがある。いろいろ参考にしながらレガシーな形でコードを書いてみた。簡単な実装だけどとりあえずは動くと思う。

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
</head>
<body>
    <form>
        <input type="text" name="card1" onkeyup="focusnext(this, 4, 'card2', event);">
        <input type="text" name="card2" onkeyup="focusnext(this, 4, 'card3', event);">
        <input type="text" name="card3" onkeyup="focusnext(this, 4, 'card4', event);">
        <input type="text" name="card4">
    </form>
    <script>
       var focusnext = function(field, limit, next, evt) {
           var evt = evt || window.event;
           var charcode = evt.charCode || evt.keyCode;
           if (field.value.length >= limit) {
               if ((48 <= charcode && charcode <= 57) || (96 <= charcode && charcode <= 105)) {
                   field.form.elements[next].focus();
               }
           }
       }
   </script>
</body>
</html>

たとえば数字だけを許可するといった文字入力制限はしていない。文字入力制限のレガシーなやり方はサイ本に書いてあるので必要なら参照してみてほしい。

余談だが、カード番号について、VISA なんかは 4 桁 × 4 つの 16 桁だけど、ダイナースやアメックスなんかは 16 桁ではない。なので、このやり方を採用する前に一度考えてみたほうがいいと思う。サイトによってはテキスト入力は 1 つだけ（4 つに分かれていない）の場合もある。

<a href="http://stackoverflow.com/questions/1959398/moving-a-focus-when-the-input-text-field-reaches-a-max-length">Moving a focus when the input text field reaches a max length</a>stackoverflow.com

jQuery でのやり方とか、桁数のこととか、上記も参考にしてみるといいと思う。