避免仅在Enter键上提交表单

时间:2018-12-24 06:07:42

标签: javascript jquery forms

我有一种形式,具有一些输入以及如下所示的文本区域。

<form id="my_form" action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br>
  Note:<br>
  <textarea id="note" name="note"></textarea>
  <br>
  <input type="submit" value="Submit">
</form> 

我必须在按Enter键时禁用表单提交。只需单击提交按钮即可提交表单。

我在stackoverflow上发现了this解决方案,所以我写了下面的代码。

$("#my_form").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
        e.preventDefault();
        return false;
    }
});

它工作正常,但是在按Enter键时不允许在文本区域中输入换行符。我该如何实现?

5 个答案:

答案 0 :(得分:2)

简单,只需更改:

<input type="submit" value="Submit">

收件人:

<input type="button" value="Submit">

然后在jQuery(或纯JS)中处理按钮的单击。

答案 1 :(得分:1)

用此按钮替换您的按钮

<button type="button" onclick="formSubmit()">Submit</button>

然后,处理程序使用如下所示的javascript提交事件。

function formSubmit() { 
    //here your code
} 

答案 2 :(得分:0)

您可以使用:not()选择器进行输入。

$("#my_form:not(input:text)").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
        e.preventDefault();
        return false;
    }
});

答案 3 :(得分:0)

只需将$(“#my_form”)替换为$(“#my_form input:text ”)。

所以代码看起来像

$("#my_form input:text").keypress( function( e ) {
    //Do stuff here
});

答案 4 :(得分:0)

这将起作用:

<html lang="en">
<head>
  <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form id="my_form" action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" id="f">
  <br>
  Last name:<br>
  <input type="text" name="lastname" id="l">
  <br>
  Note:<br>
  <textarea id="note" name="note"></textarea>
  <br>
  <input type="submit" value="Submit">
</form>
<script>

  $("#note").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {

      return true;
    }
  });
  $("#f").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
      e.preventDefault();
      return false;
    }

  });
  $("#l").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
      e.preventDefault();
      return false;
    }

  });

</script>
</body>
</html>

输入id到名字和姓氏。禁用按键。