Javascript 避免只按Enter键提交表单_Javascript_Jquery_Forms

Javascript 避免只按Enter键提交表单

javascript jquery forms

Javascript 避免只按Enter键提交表单,javascript,jquery,forms,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:<b

我有一个表单，它有一些输入和文本区域，如下所示

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

function formSubmit() { 
    //here your code
}

它工作正常，但按Enter键时不允许在文本区域输入新行。如何实现这一点？

您可以使用

：not（）

选择器进行输入

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

只需将$（“#我的表格”）替换为$（“#我的表格input:text”）

所以代码看起来像

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

简单，只要改变：

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

致：

然后在jQuery（或纯JS）中点击按钮。

用此按钮替换您的按钮

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

这将有助于：

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


文件
名字：



姓氏：



注：



$（“#注”）。按键（功能（e）{
var代码=e.keyCode | | e.which；
如果（代码==13）{
返回true；
}
});
$（“#f”）。按键（功能（e）{
var代码=e.keyCode | | e.which；
如果（代码==13）{
e、 预防默认值（）；
返回false；
}
});
$（“#l”）.按键（功能（e）{
var代码=e.keyCode | | e.which；
如果（代码==13）{
e、 预防默认值（）；
返回false；
}
});

为名字和姓氏输入

id

s。禁用它们上的按键。

因此，只有当用户单击“提交”按钮时，您才希望表单提交正确吗？是。表单只能在点击提交按钮后提交。请执行此

submit@A.Meshu的可能副本-我检查过，不可能重复，因为我必须避免“仅”按Enter键提交表单，并且不必阻止该表单上Enter键的正常功能。#我的表单
是否曾经是一个输入：文本
？因为在您的代码中，只能使用以下内容：
？这是非常不灵活的。每次添加新输入时，都必须添加代码以确定如何处理enter？如果需要这种灵活性，最好使用数据-属性。
<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>