如何在不提交表单的情况下按 Enter 键单击按钮答案

【问题标题】：How to press enter to click a button without submitting form如何在不提交表单的情况下按 Enter 键单击按钮
【发布时间】：2017-08-05 05:45:09
【问题描述】：

我目前有一个登录按钮，onclick，显示加载图标 2 秒，然后显示隐藏的 div，隐藏的 div 也是表单的一部分，并包含一个实际提交表单的最终提交按钮。登录按钮仅显示隐藏的 div。我希望能够在表单的密码部分按回车键，这将按下按钮，然后触发此功能，如下所示。

function showDiv() {
document.getElementById('SteamLogin').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}

我的表单的用户名和密码输入允许我按 Enter，但是它提交了我不想要的表单。我希望输入键只需按下登录按钮，它会显示隐藏的 div。就是这样。

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv();">

任何帮助将不胜感激

【问题讨论】：

标签： javascript jquery html css forms

【解决方案1】：

典型的做法是在表单上收听submit。

$('form').on('submit', function(e) {
    e.preventDefault();
    // If '#userLogin' is the submit button for the form, just move the
    // code for the `$('#userLogin').click()` event handler in here.
    showDiv();
});

【讨论】：

【解决方案2】：

你的意思是在输入标签上按回车键，然后只显示隐藏的 div 吗？

$('form input').keypress(function (e) {
  var key = e.which; //e.which is the code of press
  if (key == 13) { // 13 means enter
    alert("enter!");
    //do someting....
    e.preventDefault(); //prevent the default handler
    e.stopPropagation() //stop propagation of the event
  } 
});

如果你没有听回车，可能是浏览器的默认处理程序
尝试使用onkeydown="if(event.keyCode==13)return false;"
像这样将此 attr 添加到您的表单中：
<form onkeydown="if(event.keyCode==13)return false;">xxxxxxx</form>

我为你做了一个例子，return false 停止了默认处理程序：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <form onkeydown="showDiv();return false">
    <input type="text"  name="submit" id="userLogin" value="Sign in" width="104" height="25" >
    <input type="password"  name="submit" id="userLogin" value="Sign in" width="104" height="25" >
    <input type="button"  name="submit" id="userLogin" value="Sign in" width="104" height="25" onclick="showDiv();">
    <input type="submit"  name="submit" id="submit" value="Sign in" width="104" height="25"  onclick="submit();">
  </form>
 </body>
 <script>
    function showDiv() {
        console.log('show');
    }

    function submit() {
        console.log('submit');
    }
 </script>
</html>

【讨论】：

是的，就像你说的那样，当我使用这个脚本时，按回车仍然提交表单
我有一个表单，里面有两个按钮。第一个按钮不提交任何内容。它只显示一个隐藏的 div。当用户在用户名或密码字段内时，我想输入只需单击按钮，这可能吗？
也许这个例子可以帮助你