如何防止在基于web的应用程序中按ENTER键提交表单?


当前回答

我认为,你可以在javascript的表单中捕获键下,防止冒泡。网页上的ENTER基本上只是提交当前所选控件所在的表单。

其他回答

以下是我的做法:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter" && event.target.tagName !== 'TEXTAREA')
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
});

为了防止在文本区域或输入字段中按enter键时提交表单,请检查submit事件以查找发送该事件的元素类型。

示例1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

更好的解决方案是,如果没有提交按钮,而使用普通按钮触发事件。这是因为在第一个示例中触发了2个提交事件,而在第二个示例中只触发了1个提交事件。

示例2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

我认为,你可以在javascript的表单中捕获键下,防止冒泡。网页上的ENTER基本上只是提交当前所选控件所在的表单。

我也遇到了同样的问题(表单包含大量的文本字段和不熟练的用户)。

我是这样解决的:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

在HTML代码中使用这个:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

通过这种方式,ENTER键按计划工作,但需要确认(通常是第二次按ENTER键)。

我留给读者的任务是,如果用户决定继续使用表单,那么脚本会将用户发送到按ENTER的字段中。

ENTER键仅仅激活表单的默认提交按钮,这将是第一个

<input type="submit" />

浏览器在表单中查找。

所以不要有提交按钮,而是类似的东西

<input type="button" value="Submit" onclick="submitform()" /> 

编辑:回应评论中的讨论:

如果只有一个文本字段,这就行不通了——但在这种情况下,这可能是理想的行为。

另一个问题是,这依赖于Javascript来提交表单。从可访问性的角度来看,这可能是一个问题。这可以通过用javascript编写<input type='button'/>来解决,然后在<noscript>标签中放入<input type='submit' />。这种方法的缺点是,对于禁用javascript的浏览器,您将在ENTER时提交表单。在这种情况下,由OP决定期望的行为是什么。

我知道没有办法做到这一点而不调用javascript。