按 Enter 阻止用户提交表单答案

【问题标题】：Prevent users from submitting a form by hitting Enter按 Enter 阻止用户提交表单
【发布时间】：2010-10-28 01:36:20
【问题描述】：

我在一个网站上进行了一项调查，用户按 Enter（我不知道为什么）并在未点击提交按钮的情况下意外提交了调查（表单）似乎存在一些问题。有没有办法防止这种情况？

我在调查中使用 HTML、PHP 5.2.9 和 jQuery。

【问题讨论】：

不要使用表单标签并执行自定义 ajax 请求 :) 但是当然，您可以继续使用密钥侦听和预防方法，这就是我要做的......
我只是不使用表单标签，因为我更喜欢通过非传统方式通过 ajax 请求处理表单（即：提交一些字段，因为它们的焦点被丢弃等）。您还可以创建一个特殊的侦听器来捕获 Enter 键并仅在您想这样做时对其进行处理。

标签： jquery html forms form-submit

【解决方案1】：

进入您的 css 并将其添加到其中，然后只要您有提交输入，如果您不再需要它，您可以将其删除或键入 activate 和 deactivate 来自动阻止公式的提交

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

【讨论】：

【解决方案2】：

这会禁用页面上所有表单的输入键，并且不会阻止在 textarea 中输入。

    // disable form submit with enter

    $('form input:not([type="submit"])').keydown((e) => {
        if (e.keyCode === 13) {
            e.preventDefault();
            return false;
        }
        return true;
    });

【讨论】：

【解决方案3】：

如果您使用的是 Alpine，您可以通过按 Enter 使用以下命令来阻止表单提交：

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

或者，您可以使用.window 修饰符在页面上的根window 对象而不是元素上注册事件侦听器。

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>

【讨论】：

【解决方案4】：

在对其他解决方案感到非常沮丧之后，这对我在所有浏览器中都有效。 name_space 外部函数只是为了避免声明全局变量，我也建议这样做。

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

使用示例：

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

【讨论】：

【解决方案5】：

用途：

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

【讨论】：

【解决方案6】：

在我的例子中，我在一个表单中有几个 jQuery UI 自动完成字段和文本区域，所以我绝对希望它们接受 Enter。所以我从表单中删除了type="submit" 输入，并添加了一个锚点<a href="" id="btn">Ok</a>。然后我将其设置为按钮并添加以下代码：

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

如果用户填写了所有必填字段，validateData() 成功并提交表单。

【讨论】：