如何防止在基于web的应用程序中按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的字段中。

其他回答

只需从onsubmit处理程序返回false

<form onsubmit="return false;">

或者如果你想要一个中间的处理程序

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

为了防止在文本区域或输入字段中按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();
    }
});

简单地添加这个属性到你的FORM标签:

onsubmit="return gbCanSubmit;"

然后,在你的SCRIPT标签中,添加这个:

var gbCanSubmit = false;

然后,当你创建一个按钮或出于任何其他原因(比如在函数中)你最终允许提交时,只需翻转全局布尔值并执行.submit()调用,类似于下面的示例:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

你会发现这更简单和有用:D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

简而言之,纯Javascript的答案是:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

这只会禁用input type='text'的"Enter"键动作。访问者仍然可以在整个网站上使用“Enter”键。

如果你想在其他操作中禁用“Enter”,你可以添加console.log(e);为了你的测试目的,在chrome中按F12,进入“控制台”选项卡,点击页面上的“backspace”,看看里面返回了什么值,然后你可以针对所有这些参数来进一步增强上面的代码,以满足你对“e.t target”的需求。节点名”、“e。target。键入”和更多…

在这里可以看到我对类似问题的详细回答