Question

我有一个带有多个按钮的表单（用于在下一部分可见之前验证每个部分是否完整，并根据之前的响应更改下一部分）。我还隐藏了最终提交按钮，直到最终验证完成（重新运行所有单独的验证）。这样，在完成所有必填字段之前，用户无法单击提交。但是，回车键仍然绑定到提交按钮。我已经查找并找到了一些事件处理程序代码，它将关闭回车键功能（我不太了解），这会阻止提前提交表单，但我宁愿调整该代码以将输入键功能转移到每个按钮连续，然后最终到提交按钮本身。有什么想法吗？

我发现的示例代码无法理解：

    <form>
    <label for="age">Age:</label>
    <input type="number" min="0" max="120" name="age" id="age">
    <button id="child">Child</button>
    <button id="adult">Adult</button>
    </form>
    <script>
    (function() {
    var age = document.getElementById('age');
    age.addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            if (age.value > 20) {
                document.getElementById('adult').click();
            } else {
                document.getElementById('child').click();
            }
        }
    });
    }());
    </script>

Answer 1

对于之前的每个提交表单按钮，这可能有效：

$("#id_of_form").keypress(function(event){
    event.preventDefault();
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

Answer 2

根据要求，我想出了一个例子，说明我在this fiddle

中如何做到这一点。

我正在禁用不是第一个按钮的按钮，当输入字段中有文本并且用户按下它旁边的按钮（在同一部分中），或者如果用户按下Enter键（检查keyCode 13），就像@depperm提到的那样，它会查看按钮是否被禁用，否则，它将用输入的文本替换它并添加到值的变量。

var $button = $('button'),
    $form   = $('form'),
    valStr  = '';

// on button clicks, prevent default action, and fire buttonPress function
$button.click(function (e) {
    e.preventDefault();
    buttonPress($(this).closest('.section'));
});

// when user hits enter key and button is not disabled, click button
$(".section").keyup(function (e) {
    if (e.keyCode == 13) $(this).find('button').click($(this));
});

function buttonPress($section) {
    var thisVal = $section.find('input').val();

    // if the button is not disabled for the section, and the value is not blank
    if (!$section.find('button').attr('disabled') && thisVal !== '') {
        valStr += (thisVal);

        // replace this section HTML with the val string we just added to,
        // then remove the next section's disabled attribute from button
        // if there is no next section, then trigger a submit (or you could enable the submit button for the user to be able to click for form submit)
        $section
            .html('<p>' + valStr + '</p>')
            .next('.section').length ?     $section.next().find('button').removeAttr('disabled') : $form.trigger('submit');
    }
}

希望这是朝着正确方向迈出的一步。

** / 1 /

上的编辑，链接和语法错误

Answer 3

结束了我在这里提出的一系列建议以及它指出的一些进一步的研究。

在我的

的头部开始了

    $(document).ready(function() {
    $(window).keypress(function(event){
    if(event.keyCode == 13) {
    $("#dadosTutor").click();
    event.preventDefault();
    return false;
    }
    });
    });

然后将其中的一部分添加到我的每个验证中以获取空输入：

    if (nullCheck() === 0) {
    alert('Você ainda não tenham completado o preenchimento da tabela Dados do Tutorando. Faz favor, verifique que você respondeu a cada pergunta e submeter mais uma vez.');
} 
else {
    $("#numberProcesso").show();
    $("#numberPatients").show();
    $("#patientProcesso").show();
    $("#dadosTutor").remove();
    //This is what I added
    $(window).keypress(function(event){
    if(event.keyCode == 13) {
   $("#patientProcesso").click();}
});
}
}

将输入应用于顺序表单按钮

3 个答案: