通过按Enter键阻止用户提交表单

27 回答

• 6

  这对我有用

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

  回复于 2024-05-05T04:28:41+08:00
• 4

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

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

  只需在提交方法上调用它即可 .

  回复于 2024-05-05T04:28:41+08:00
• 6

  这里有很多好的答案，我只是想从UX的角度做出贡献 . 表单中的键盘控件非常重要 .

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

  禁用 Enter 表单提交仍应允许以下内容：

  • 当提交按钮聚焦时，通过 Enter 提交表单 .

  • 填写所有字段时的表单提交 .

  • 通过 Enter 与非提交按钮交互 .

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

  $('form').on('keypress', function(e) {
    // Register keypress on buttons.
    $attr = $(e.target).attr('type);
    if ($attr === 'button' || $attr === 'submit') {
      return true;
    }
  
    // Ignore keypress if all fields are not populated.
    if (e.which === 13 && !fieldsArePopulated(this)) {
      return false;
    }
  });
  

  回复于 2024-05-05T04:28:41+08:00
• 0

  您可以按原样保留表单，并添加一些额外的客户端验证，而不是阻止用户按Enter键，当调查未完成时，结果不会发送到服务器，用户会收到一条好消息告诉你需要完成什么来完成表格 . 如果您使用的是jQuery，请尝试使用Validation插件：

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

  这需要比捕获Enter按钮更多的工作，但肯定会提供更丰富的用户体验 .

  回复于 2024-05-05T04:28:41+08:00
• 2

  给表单一个'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>
  

  回复于 2024-05-05T04:28:41+08:00
• 0

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

  接受的答案是ok-ish，但它并没有停止提交numpad enter . 至少在当前版本的Chrome中 . 我不得不改变键码条件，然后它工作 .

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

  回复于 2024-05-05T04:28:41+08:00
• -2

  只有BLOCK SUBMIT而不是其他重要的输入键功能，例如在 <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>
  
    <p>Sample textfield (try enter key):</p>
    <input type="text" placeholder="" />
    
  
    <input type="submit" value="Save" />
    <h3 id="log"></h3>
  </form>
  

  回复于 2024-05-05T04:28:41+08:00
• 17

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

  回复于 2024-05-05T04:28:41+08:00
• 499

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

  回复于 2024-05-05T04:28:41+08:00
• 9

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

  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(); }
      });
  

  回复于 2024-05-05T04:28:41+08:00
• 17

  一种完全不同的方法：

  • The first <button type="submit"> in the form will be activated on pressing Enter.

  • 即使使用 style="display:none; 隐藏按钮也是如此

  • The script for that button can return false, which aborts the submission process.

  • 您仍然可以使用另一个 <button type=submit> 来提交表单 . 只需返回 true 即可级联提交内容 .

  • 在关注真实提交按钮时按Enter键将激活真实提交按钮 .

  • 在 <textarea> 或其他表单控件中按Enter键将正常运行 .

  • 在 <input> 表单控件中按Enter键将触发第一个 <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>
  

  回复于 2024-05-05T04:28:41+08:00
• 61

  一个很好的简单的小jQuery解决方案：

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

  回复于 2024-05-05T04:28:41+08:00
• 0

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

  <form onsubmit="return false;">
  

  从JavaScript调用表单上的submit（）不会触发该事件 .

  回复于 2024-05-05T04:28:41+08:00
• -2

  你可以使用诸如的方法

  $(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;
      }
    });
  });
  

  回复于 2024-05-05T04:28:41+08:00
• 0

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

  This is not a jQuery-related answer

  HTML

  <form onsubmit="return false;" method=post>
    <input type="text" />
  
    <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/

  回复于 2024-05-05T04:28:41+08:00
• 0

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

  而是使用它

  <input type="button">
  

  而不是使用这个

  <input type="submit">
  

  回复于 2024-05-05T04:28:41+08:00
• 10

  W3C HTML5规范的Section 4.10.22.2 Implicit submission说：

  表单元素的默认按钮是树顺序中的第一个提交按钮，其表单所有者是该表单元素 . 如果用户代理支持让用户隐式提交表单（例如，在某些平台上按下“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浏览器来防止隐式表单提交 .

  回复于 2024-05-05T04:28:41+08:00
• 0

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

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

  回复于 2024-05-05T04:28:41+08:00
• 753

  在我的具体情况下，我不得不停止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的人特别有用 .

  回复于 2024-05-05T04:28:41+08:00
• 42

  禁止在任何地方输入密钥

  如果表单中没有 <textarea> ，只需将以下内容添加到 <form> ：

  <form ... onkeypress="return event.keyCode != 13;">
  

  或者使用jQuery：

  $(document).on("keypress", "form", function(event) { 
      return event.keyCode != 13;
  });
  

  这将导致在keyCode上检查表单内的每个按键 . 如果它不是13（Enter键），那么它将返回true并且任何内容都将按预期运行 . 如果它是13（Enter键），那么它将返回false并且任何东西将立即停止，因此表单将不会被提交 .

  keypress 事件优先于 keydown ，因为只有在实际插入字符时才会触发此事件 . 按下任何键时会触发 keydown （和 keyup ），包括控制键 . 并且_358336_的 keyCode 代表插入的实际字符，而不是所使用的物理密钥 . 这样您就不需要显式检查Numpad Enter键（108）是否也被按下 . keyup 为时已晚，无法阻止表单提交 .

  请注意，在其他一些答案而不是 $(document) 中建议的 $(window) 对IE <= 8中的 keydown / keypress / keyup 不起作用，因此's not a good choice if you'也喜欢覆盖那些不良用户 .

  仅允许在textareas上输入密钥

  如果表单中有 <textarea> （当然应接受Enter键），则将keypress处理程序添加到不是 <textarea> 的每个输入元素 .

  <input ... onkeypress="return event.keyCode != 13;">
  <select ... onkeypress="return event.keyCode != 13;">
  ...
  

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

  $(document).on("keypress", ":input:not(textarea)", function(event) {
      return event.keyCode != 13;
  });
  

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

  $(document).on("keypress", ":input:not(textarea)", function(event) {
      if (event.keyCode == 13) {
          event.preventDefault();
      }
  });
  

  允许在textareas上输入密钥并仅提交按钮

  如果您还想在提交按钮 <input|button type="submit"> 上同时输入密钥，那么您始终可以按如下方式优化选择器 .

  $(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
      // ...
  });
  

  请注意， input[type=text] 正如其他一些答案所建议的那样't cover those HTML5 non-text inputs, so that'不是一个好的选择器 .

  回复于 2024-05-05T04:28:41+08:00
• 22

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

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

  （我希望你喜欢除非条款中的好处 . ）

  回复于 2024-05-05T04:28:41+08:00
• 20

  • 不要将 type="submit" 用于输入或按钮 .

  • 使用 type="button" 并使用js [Jquery / angular / etc]将表单提交给服务器 .

  回复于 2024-05-05T04:28:41+08:00
• 17

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

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

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

  回复于 2024-05-05T04:28:41+08:00
• -2

  使用：

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

  此解决方案适用于网站上的所有表单（也适用于使用Ajax插入的表单），仅防止输入文本中的输入 . 将它放在文档就绪功能中，并终生忘记这个问题 .

  回复于 2024-05-05T04:28:41+08:00
• 8

  在我的情况下，我在表单中有几个jQuery UI自动填充字段和textareas，所以我绝对希望他们接受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() 成功并且表单提交 .

  回复于 2024-05-05T04:28:41+08:00
• 4

  使用：

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

  回复于 2024-05-05T04:28:41+08:00
• 2

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

  <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() 方法 .

  我是 class 选择者的忠实粉丝，权衡所有利弊和绩效讨论 . 我的命名约定是'idSomething'，表示jQuery使用它作为id，将它与CSS样式分开 .

  回复于 2024-05-05T04:28:41+08:00