создание поля ввода для кредитных карт

Question

Я хочу создать поле ввода/вывода кредитной карты, где есть 4 поля. Первые 3 поля имеют пределы символов 4, тогда последний имеет 5 (из-за того, что Amex имеет дополнительный номер).

Функциональность, которую я пытаюсь создать, будет означать, что когда предел персонажа достигнет своего предела, он перейдет в следующее поле.

Я предполагаю, что это делается проще всего через JQuery. Я полагаю, что логика может работать примерно так:

если значение поля == ограничено, а затем сфокусируйтесь на следующее поле. Будет ли это способ сделать это? Или есть намного лучший способ?

Answer 1

Дайте им все class="ccInput", а затем с помощью JQuery:

$(function(){ 
    $('.ccInput').not(':last').keyup(function(){ 
     if($(this).val().length == Number($(this).attr('maxlength'))) 
      $(this).next('.ccInput').focus(); 
    }); 
});