Auto-tab and delete button with jQuery

Question

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.

Not Solved

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 when clicked.

Any ideas?

Edit: Solved (Part 1)
This script fixes all the issues I had. Commented for your benefit. Please point out any ways to refactor

$("#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" />

Answer 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 ?