javascript - 如何找到哪个键触发了表单提交事件

Question

我有一个包含多个字段的表单，但只有一个必填字段。问题是在填写必填字段并按下 Enter 键时提交表单。

如果在文本区域内按下 Enter 键没有问题，但对于文本框，表单会被提交。

我在考虑以下解决方案。

• 订阅跑道表单提交事件。

• 查找导致表单提交的键

• 如果表单提交是由 Enter 键触发的，则阻止默认操作。

现在我正在使用以下方法。

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {              
      e.preventDefault();
    }
});

它工作正常。但是有没有办法在表单提交事件中做到这一点？

Answer 1

在之前的回答中看到您的评论后，您可以像这样验证您的表单 fiddle

HTML:

<table><form>
<tr>
    <td>First Name:
    </td>
    <td><input type='text' id='txtFName'/ >
    </td>
</tr>
<tr>
    <td>Last Name:
    </td>
    <td><input type='text' id='txtLName'/ >
    </td>
</tr>
<tr>
    <td>Age:
    </td>
    <td><input type='text' id='txtAge'/ >
    </td>
</tr>
<tr>
    <td>Email:
    </td>
    <td><input type='text' id='txtEmail'/ >
    </td>
</tr>
<tr>
    <td colspan="2" style='text-align:center;'><input type="submit" id="btnSubmit" value=" Submit ">
    </td>
</tr>
</form>
</table>

JS:

    $(document).ready(function() {
    $('form').submit(function(e) {
        var isValid = true;
        var allow = false;
        $('input[type="text"]').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });                 
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false){ 
            if(!confirm('Few Fields are empty! Are you sure want to continue?')){
                e.preventDefault();
          } else {
          alert('Thank you for submitting');
          }            
        }
        else 
           alert('Thank you for submitting');
        });
});