使用 jQuery 的自动选项卡和删除按钮答案

【问题标题】：Auto-tab and delete button with jQuery使用 jQuery 的自动选项卡和删除按钮
【发布时间】：2009-11-30 11:32:09
【问题描述】：

我正在使用 jQuery 复制 iPhone 解锁屏幕。我在为密码解锁页面实现自动选项卡和删除按钮时遇到问题。

另外，我如何实现一个删除按钮，在清除输入字段时自动向后切换？

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

我的意图是最后填充的输入具有focus 类，因此删除按钮将从那里开始并返回，当输入用完时停止。

删除按钮在单击时根本不执行任何操作。我该如何解决这个问题？

【问题讨论】：

标签： jquery forms

【解决方案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" />

【讨论】：

【解决方案2】：

要检查当前元素的索引，您可以使用

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

您的“删除按钮”功能在我看来还不错，所以也许您想详细说明您遇到的问题？

【讨论】：

删除和取消按钮是相同的，当我启用cancel() 功能时，它会覆盖所有删除按钮功能。