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

问题描述：

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

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

我的表单的用户名和密码输入允许我按回车，但它提交表单，我不想要。我想要输入键只需按登录按钮，显示隐藏的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();">

任何帮助将不胜感激

答

的典型方法是听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(); 
});

userLo杜松子酒是显示隐藏的div的按钮 –

答

你的意思是在输入标签上按住enter键，然后只显示隐藏的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>

YES与您所说的完全相同，当我使用此脚本按Enter时仍提交表格 –

我已编辑答案，也许这将有所帮助 – Ryan

我有一个窗体，里面有两个按钮。第一个按钮不提交任何内容。它只是显示一个隐藏的div。当用户在用户名或密码字段中时，我想进入只需单击该按钮即可？ –

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

相关推荐