Авто вкладка и кнопка удаления с jQuery

Question

Я работаю над копированием экрана разблокировки iPhone с помощью jQuery. У меня проблемы с реализацией автоматической вкладки и кнопки удаления для страницы разблокировки пароля.

Кроме того, как я могу реализовать кнопку удаления, которая автоматически вкладывает назад при очистке полей ввода?

$("#keypad li a.delete").click(function() {
    $("input.focus").val("").removeClass("focus").prev().addClass("focus").focus();
});

Мое намерение состоит в том, чтобы последний заполненный вход имел класс focus, поэтому кнопка удаления начнется там и вернется назад, останавливаясь, когда у него закончатся входы.

Кнопка удаления просто ничего не делает при нажатии. Как я могу решить это?

Answer 1

Этот скрипт исправляет все проблемы,

$("#pw-container form input").keyup(function() {
    if ($("#pw-container form input:first").val().length > 0) {
        $("#keypad li a.cancel").removeClass("cancel").addClass("delete").text("Delete");
        if( $(this).prevAll("input").size() === 3 ) { 
            $(this).addClass("focus").focus(); 
        } else if ($(this).val().length > 0) {
            $(this).removeClass("focus").next().addClass("focus").focus();
        }
    } else if ($("#pw-container form input:first").val().length === 0) {
        $("#keypad li a.delete").removeClass("delete").addClass("cancel").text("Cancel");
    }
});

Также HTML,

<input type="password" maxlength="1" size="1" class="focus" />
<input type="password" maxlength="1" size="1" />
<input type="password" maxlength="1" size="1" />
<input type="password" maxlength="1" size="1" />

Answer 2

Для проверки индекса текущего элемента вы можете использовать

if( $(this).prevAll("input").size() < 3 ){...}

и ваша функциональность "кнопка удаления" выглядит хорошо для меня, так что, может быть, вы хотите подробнее остановиться на проблемах, которые у вас возникают с этим?