当用户按 Enter 键时，Javascript 登录表单不会提交

Question

我正在为一个网站开发一个简单的 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>

...除了一件事之外，它有效：按 Enter 键提交表单不会执行任何操作。我有一种感觉，这是因为我使用了“onclick”，但我不知道该用什么来代替。想法？

---

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

Answer 1

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

1.您最关心的问题：

(为什么按下 ENTER 后输入按钮不起作用？)

使用 提交 按钮类型。

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

..代替

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

您的问题实际上与使用过没有任何关系 单击时 属性。相反，您没有得到您想要的行为，因为您已经使用了 按钮 输入类型，其行为方式与提交按钮不同。

在 HTML 和 XHTML 中，某些元素有默认行为。表单上的输入按钮通常是“提交”类型。在大多数浏览器中，“提交”按钮 默认火灾 当从焦点元素按下 ENTER 时 在同一个表单元素中. 。“按钮”输入类型则不然。如果您想利用该默认行为，可以将输入类型更改为“提交”。

例如：

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

2.安全问题：

@阿迪 提到了安全问题。与执行以下操作相关的一系列安全问题 在 JavaScript 中登录. 。这些可能都在范围之外 这个问题的域, ，特别是因为您已经表示您并不特别担心它，并且您的登录方法实际上只是将 location.href 设置为新的 html 页面（表明您可能没有任何真正的安全机制到位）。

与其苦苦挣扎，这里有 相关主题的链接 如果有人直接对这些问题感兴趣的话。

• 有什么方法可以在客户端进行用户验证吗？
• 在 jQuery 中加密 Ajax 调用进行身份验证

3.其他事宜：

这是一个 快速清理 您的代码，它只遵循一些最佳实践。它没有解决人们提到的安全问题。相反，我只是将其包括在内 举例说明一些健康习惯. 。如果您对我为何以某种方式编写某些内容有具体疑问，请随时提问。还， 浏览堆栈以查找相关主题 （因为您的问题可能已经在这里讨论过）。

主要需要注意的是 删除事件属性 （onclick=""、onsubmit="" 或 onkeypress=""）来自 HTML。这些属于 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>

Answer 2

取代<！> lt; input type = <！> quot; button <！> quot; <！> gt;，使用<！> lt; input type = <！> quot; submit <！> quot; <！> GT ;.您可以将验证代码放在表单上的提交处理程序中：

<！> lt; form id = <！> quot; loginwindow <！> quot; <！>的onsubmit = QUOT;验证（...）QUOT <！>; GT <！>;

Answer 3

这是因为它不是表单提交，所以当用户按下回车时没有事件被触发。上述表单提交选项的替代方法是为输入表单添加一个事件监听器，以检测用户是否按下了回车。

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

Answer 4

将脚本直接放在html文档中。使用您要使用的功能更改onclick值。当用户点击进入或按下提交按钮时，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>

Answer 5

也许你可以试试这个：

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

正如其他人所指出的那样，您的解决方案还存在其他问题。但这应该回答你的问题。

Answer 6

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

- 只有伪安全的js-logins方式是这样的：

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

Answer 7

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

与您的问题更相关： - 您发生了两件事。

1. 用户点击按钮。
2. 用户按enter键。

回车键提交表单，但不单击按钮。

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

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