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

Question

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

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

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

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

Answer 1

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

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