输入已禁用，直到填写上一个输入

Question

我想要做的是，当用户登陆表单时。我希望第一个输入处于活动状态，因此用户可以单击，选择或填写它。我希望他们一步一步地填写表单，所以我希望下一个输入只在他们填写当前输入后激活。

我还希望取消激活提交按钮，直到填写完所有输入后才能激活。

实现这一目标的最佳方式是什么？

我附上了一张图片来说明我正在尝试做什么。

Answer 1

这可能会给你一个很好的起点： Fiddle

为每个表单元素添加一个step类（我相信这可以让他们成为彼此的兄弟姐妹）：

<form class="step-by-step">
    <!-- Start with only the first one enabled -->
    <input type="text" class="step" id="step1" />
    <input type="text" class="step" id="step2" disabled />
    <input type="text" class="step" id="step3" disabled />
    <!-- Also works with selects,
         as long as you keep track of IDs -->
    <select id="step4" class="step" disabled>
        <option value="">Choose one</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <select id="step5" class="step" disabled>
        <option value="">Choose one</option>
        <option value="europe">Europe</option>
        <option value="america">America</option>
    </select>
</form>

然后，当某些内容发生变化时，使用next()函数查找表单中的下一步，并禁用或启用它（或者如果元素为空，则执行所有后续步骤）：

// The change event is fired when a form element loses focus
// and its value has changed since the last time we interacted with it
$('.step').change(function() {
    var next_step = $(this).next('.step');
    var all_next_steps = $(this).nextAll('.step');
    // If the element *has* a value
    if ($(this).val()) {
        // Should also perform validation here
        next_step.attr('disabled', false);
    }
    // If the element doesn't have a value
    else {
        // Clear the value of all next steps and disable
        all_next_steps.val('');
        all_next_steps.attr('disabled', true);
    }
});

对于TAB功能，以下是一个快速修复，我确信可以某种方式与上述功能集成。

$('.step').keydown(function(event) {
    // If they pressed tab AND the input has a (valid) value
    if ($(this).val() && event.keyCode == 9) {
        $(this).next('.step').attr('disabled', false);
    }
});

Answer 2

很少有事情需要考虑：

可以通过单击带有type =“submit”的按钮或返回键来提交表单。

因此，为了达到预期的效果：

1. $（ “表”）找到（ “输入：第一”）聚焦（）; //自动对焦第一个输入字段。
2. 确保所有输入都具有“tabindex”属性，以便用户可以使用制表符循环。
3. Javascript必须禁用表单操作，直到用户通过验证。