Auto-tab and delete button with jQuery

I'm working to replicate the iPhone unlock screen using jQuery. I'm having trouble implementing auto-tab and a delete button for the passcode unlock page.

Also, how can I implement a delete button which auto-tabs backwards while clearing input fields?

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

My intention is that the last filled input has a class of focus, so the delete button will start there and work its way back, stopping when it runs out of inputs.

The delete button simply doesn't do anything w开发者_开发技巧hen clicked. How can I solve this?

This script fixes all the issues,

$("#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");
    }
});

Also, the 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" />

To check the index of the current element you can use

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

and your "delete button" functionality looks OK to me, so maybe you want to elaborate on the issues you are having with it ?