jquery - 按 Enter 阻止用户提交表单

Question

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

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

score 988 · Accepted Answer

您可以使用诸如

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

在阅读原始帖子的评论时，为了使其更有用并允许人们在Enter完成所有字段时按下：

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

score 724 · Accepted Answer

禁止在任何地方输入键

如果您的表单中没有 a <textarea>，则只需将以下内容添加到您的<form>:

<form ... onkeydown="return event.key != 'Enter';">

或者使用 jQuery：

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

这将导致表单内的每个按键都将在key. 如果不是Enter，那么它将返回true并且一切照常继续。如果是Enter，那么它将返回false并且任何事情都会立即停止，因此不会提交表单。

该keydown事件优先keyup于keyup阻止表单提交为时已晚。历史上也有keypress，但已弃用，就像KeyboardEvent.keyCode. 您应该KeyboardEvent.key改用它返回被按下的键的名称。选中时Enter，将检查 13（正常输入）和 108（小键盘输入）。

请注意，$(window)正如其他一些答案中所建议的那样，而不是$(document)不适用于IE<=8 中的keydown/ keyup，因此，如果您也想涵盖那些可怜的用户，那么这不是一个好的选择。

仅允许在 textareas 上输入键

如果您<textarea>的表单中有 a （当然应该接受 Enter 键），则将 keydown 处理程序添加到不是<textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

为了减少样板，最好使用 jQuery 来完成：

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

如果您在这些输入元素上附加了其他事件处理函数，出于某种原因您还想在输入键上调用它们，那么只阻止事件的默认行为而不是返回 false，以便它可以正确传播到其他处理程序。

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

只允许在 textareas 上输入键和提交按钮

如果您也想在提交按钮上允许输入键<input|button type="submit">，那么您可以随时优化选择器，如下所示。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

请注意，input[type=text]正如其他一些答案中所建议的那样，它不涵盖那些 HTML5 非文本输入，因此这不是一个好的选择器。

score 233 · Accepted Answer

W3C HTML5 规范的第 4.10.22.2 节隐式提交说：

form元素的默认按钮是按树形顺序排列的第一个提交按钮，其表单所有者是该元素。form

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时，按下“enter”键会隐式提交表单），那么对于默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。

注意：因此，如果禁用默认按钮，则在使用这种隐式提交机制时不会提交表单。（按钮在禁用时没有激活行为。）

因此，禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮作为表单中的第一个提交按钮：

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

这种方法的一个很好的特点是它可以在没有 JavaScript的情况下工作。无论是否启用 JavaScript，都需要符合标准的 Web 浏览器来防止隐式提交表单。

score 70 · Accepted Answer

我必须捕获与按键相关的所有三个事件，以防止表单被提交：

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

您可以将以上所有内容组合成一个不错的紧凑版本：

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

score 63 · Accepted Answer

如果您使用脚本进行实际提交，那么您可以将“return false”行添加到 onsubmit 处理程序，如下所示：

<form onsubmit="return false;">

从 JavaScript 对表单调用 submit() 不会触发事件。

score 24 · Accepted Answer

采用：

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

此解决方案适用于网站上的所有表单（也适用于使用 Ajax 插入的表单），仅防止Enter输入文本中出现 s。把它放在一个文件准备功能中，一辈子忘记这个问题。

score 22 · Accepted Answer

您可以保留表单并添加一些额外的客户端验证，而不是阻止用户按Enter，这可能看起来不自然完成表格需要完成什么。如果您使用的是 jQuery，请尝试 Validation 插件：

http://docs.jquery.com/Plugins/Validation

这将需要比抓住Enter按钮更多的工作，但它肯定会提供更丰富的用户体验。

score 21 · Accepted Answer

一个不错的简单的小 jQuery 解决方案：

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

score 21 · Accepted Answer

我还不能评论，所以我会发布一个新的答案

接受的答案是好的，但它并没有停止在小键盘输入上提交。至少在当前版本的 Chrome 中。我必须将键码条件更改为此，然后它才能工作。

if(event.keyCode == 13 || event.keyCode == 169) {...}

score 18 · Accepted Answer

完全不同的方法：

表格中的第一个<button type="submit">将在按下时激活Enter。
即使按钮被隐藏也是如此style="display:none;
该按钮的脚本可以返回false，这会中止提交过程。
您仍然可以让另一个<button type=submit>人提交表格。只需返回true级联提交即可。
在真正的提交按钮集中时按下Enter将激活真正的提交按钮。
按Enter内部<textarea>或其他表单控件将正常运行。
按Enter内部<input>表单控件将触发第一个<button type=submit>，它返回false，因此没有任何反应。

因此：

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

score 17 · Accepted Answer

这是我达到目标的解决方案，它干净有效。

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

score 10 · Accepted Answer

不放提交按钮就可以了。只需将脚本放入输入（type=button）或添加 eventListener 如果您希望它提交表单中的数据。

而是使用这个

<input type="button">

比使用这个

<input type="submit">

score 9 · Accepted Answer

为表单提供 'javascript:void(0);' 的操作似乎可以解决问题

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

score 8 · Accepted Answer

不要将type="submit"用于输入或按钮。
使用type="button"并使用 js [Jquery/angular/etc] 将表单提交到服务器。

score 8 · Accepted Answer

这是完美的方式，您不会被重定向到您的页面

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

score 7 · Accepted Answer

我需要防止只提交特定的输入，所以我使用了一个类选择器，让它成为我需要的“全局”特性。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

这个jQuery代码：

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

或者，如果 keydown 不足：

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

一些注意事项：

在这里修改各种好的答案，Enter关键似乎适用keydown于所有浏览器。作为替代方案，我更新bind()了该on()方法。

我是类选择器的忠实粉丝，权衡所有的利弊和性能讨论。我的命名约定是“idSomething”，表示 jQuery 将其用作 id，将其与 CSS 样式分开。

score 7 · Accepted Answer

您还可以使用javascript:void(0)来阻止表单提交。

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

score 6 · Accepted Answer

这里已经有很多好的答案，我只是想从用户体验的角度贡献一些东西。表单中的键盘控件非常重要。

问题是如何禁用 keypress 上的提交Enter。不是如何Enter在整个应用程序中忽略。所以考虑将处理程序附加到表单元素，而不是窗口。

禁用Enter表单提交仍应允许以下操作：

通过Enter提交按钮获得焦点时提交表单。
填写所有字段后提交表单。
通过与非提交按钮交互Enter。

这只是样板，但它遵循所有三个条件。

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type');
  $node = e.target.nodeName.toLowerCase();
  if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

score 5 · Accepted Answer

您可以创建一个 JavaScript 方法来检查Enter键是否被击中，如果是，则停止提交。

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

只需在提交方法上调用它。

score 4 · Accepted Answer

ONLY BLOCK SUBMIT 但不是其他重要的 enter 键功能，例如在 a 中创建一个新段落<textarea>：

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

score 3 · Accepted Answer

$(document).on("keydown","form", function(event)
{
   node = event.target.nodeName.toLowerCase();
   type = $(event.target).prop('type').toLowerCase();

   if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
   {
        event.preventDefault();
        return false;
    }
});

它完美地工作！

score 3 · Accepted Answer

如果使用 Vue，请使用以下代码来阻止用户通过点击提交表单Enter：

<form @submit.prevent>...</form>

score 2 · Accepted Answer

我有一个类似的问题，我有一个带有“ajax 文本字段”（Yii CGridView）的网格，只有一个提交按钮。每次我在文本字段上进行搜索并点击输入提交的表单。我不得不对按钮做一些事情，因为它是视图之间唯一的公共按钮（MVC 模式）。我所要做的就是移除type="submit"并放置onclick="document.forms[0].submit()

score 2 · Accepted Answer

我认为它很好地涵盖了所有答案，但是如果您使用带有一些 JavaScript 验证代码的按钮，您可以将表单的 onkeypress 设置为 Enter 以按预期调用您的提交：

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS 可以是您需要做的任何事情。没有必要进行更大的全球性变革。如果您不是从头开始编写应用程序的人，并且您已经被带入修复其他人的网站而没有将其拆开并重新测试，则尤其如此。

score 1 · Accepted Answer

我在这里没有看到回答：当您浏览页面上的元素时，Enter当您到达提交按钮时按下将触发表单上的 onsubmit 处理程序，但它会将事件记录为 MouseEvent。这是我涵盖大多数基础的简短解决方案：

这不是与 jQuery 相关的答案

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

要找到一个工作示例：https ://jsfiddle.net/nemesarial/6rhogva2/

score 1 · Accepted Answer

使用Javascript（不检查任何输入字段）：

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

如果有人想将此应用于特定字段，例如输入类型文本：

<script>
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>

这在我的情况下效果很好。

score 1 · Accepted Answer

我已使用此代码禁用输入类型 [文本] 和输入类型 [密码] 上的“ENTER”键，您可以添加其他输入类型 [电子邮件] 或也可以应用于您想要的输入类型。

$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            return false;
        }
    });

score 0 · Accepted Answer

在我的具体情况下，我必须阻止 ENTER 提交表单并模拟单击提交按钮。这是因为提交按钮上有一个点击处理程序，因为我们在一个模式窗口中（继承旧代码）。无论如何，这是我针对这种情况的组合解决方案。

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

这个用例对使用 IE8 的人特别有用。

score 0 · Accepted Answer

这对我有用

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

score 0 · Accepted Answer

我想添加一些 CoffeeScript 代码（未经现场测试）：

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

（我希望你喜欢 unless 子句中的妙招。）

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

    // disable form submit with enter

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

score 0 · Accepted Answer

如果您使用的是 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>

score -2 · Accepted Answer

在对其他解决方案感到非常沮丧之后，这在所有浏览器中都对我有用。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!');}
    );
});

score -2 · Accepted Answer

采用：

// 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>

score -3 · Accepted Answer

就我而言，我在一个表单中有几个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()则成功并提交表单。

jquery - 按 Enter 阻止用户提交表单

36 回答 36

禁止在任何地方输入键

仅允许在 textareas 上输入键

只允许在 textareas 上输入键和提交按钮

HTML

JavaScript

Related

Reference