Javascript登录表单没有'；当用户点击Enter时，不能提交

我正在为一个站点开发一个简单的javascript登录，并得出以下结论：

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

登录查看
用户ID:

密码：



函数验证（text1、text2、text3、text4）
{
如果（text1==text2&&text3==text4）
加载（'album.html'）；
其他的
{
加载（'failure.html'）；
}
}
函数加载（url）
{
location.href=url；
}

…除了一件事之外，它还能工作：按enter键提交表单没有任何作用。我有一种感觉，这是因为我用了“onclick”，但我不知道该用什么来代替。想法

---

---

好吧，是的，所以我很清楚这在安全方面是多么脆弱。这不是什么特别的绝密，所以这不是一个大问题，但如果你们能用代码详细阐述你们的想法，我很乐意看到你们的想法。我列出的代码实际上就是我目前正在使用的所有代码，因此如果需要，我可以从头开始。

My Think=巨大的安全漏洞。任何人都可以查看用户名和密码

与你的问题更相关：-你有两件事正在发生

用户点击按钮

用户按下回车键

enter键提交表单，但不单击按钮

通过将代码放置在表单的onsubmit方法中，在提交表单时代码将运行。通过将按钮的输入类型更改为submit，按钮将以与enter按钮相同的方式提交表单

---

然后，您的代码将针对这两个事件运行。

这里同时讨论了几个主题。让我们试着澄清一下

1。您最关心的问题：

（为什么按ENTER键时输入按钮不起作用？）

使用提交按钮类型

<input type="submit".../> 

…而不是

<input type="button".../>

您的问题实际上与使用了onclick属性无关。相反，您没有获得所需的行为，因为您使用了按钮输入类型，它的行为与提交按钮不同

在HTML和XHTML中，某些元素有默认行为。表单上的输入按钮通常为“提交”类型。在大多数浏览器中，当从同一表单元素中的焦点元素按ENTER键时，默认情况下会触发“提交”按钮。“按钮”输入类型不适用。如果您想利用默认行为，可以将输入类型更改为“提交”

例如：

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2。安全问题：

@阿迪提到了一个安全问题。在javascript中进行登录有一大堆安全问题。这些可能超出了这个问题的范围，特别是因为您已经表示您并不特别担心它，并且您的登录方法实际上只是将location.href设置为一个新的html页面（表示您可能没有任何真正的安全机制）

如果有人直接对这些问题感兴趣，这里没有赘述，而是提供了相关主题的链接

3。其他问题：

下面是对代码的快速清理，它遵循了一些最佳实践。它没有解决人们提到的安全问题。相反，我加入它只是为了说明一些健康的习惯。如果你有关于我为什么以某种方式写东西的具体问题，请随意提问。另外，浏览堆栈以查找相关主题（此处可能已经讨论了您的问题）

需要注意的主要事项是从HTML中删除事件属性（onclick=“”、onsubmit=“”或onkeypress=“”）。这些都属于javascript，将javascript事件排除在标记之外被认为是最佳实践

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

登录查看！
用户ID:
密码：
window.onload=函数（）{
var loginForm=document.getElementById（'loginwindow'）；
如果（登录窗口）{
loginwindow.onsubmit=函数（）{
var userid=document.getElementById（'userid'）；
var pass=document.getElementById（'pass'）；
//确保javascript找到了节点：
如果（！userid | |！pass）{
返回false；
}
//实际检查值，但您希望这样做：
if（pass.value！=“secret”）{
location.href='failure.html'；
}
location.href='album.html'；
返回false；
};
}
};

使用，而不是。您可以将验证代码放入Submit处理程序的表单中：

---

也许你可以试试这个：

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

登录查看
用户ID:

密码：

---

正如其他人指出的，您的解决方案还有其他问题。但这应该可以回答您的问题。

这是因为它不是表单提交，所以当用户按enter键时不会触发任何事件。上述表单提交选项的替代方法是为输入表单添加一个事件侦听器，以检测用户是否按下enter键

<input type="password" name="text1" onkeypress="detectKey(event)">

---

这肯定太不安全了，因为每个人都可以在一秒钟内破解它

--进行js登录的唯一伪安全方法如下：

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

名称：

密码：

将脚本直接放入html文档中。使用要使用的函数更改onclick值。当用户点击enter或按下submit按钮时，html中的脚本将告诉表单提交

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

//提交表格
$（“#表格-v2”）。提交（功能（事件）{