用户按 Enter 时未提交 Javascript 登录表单

Posted 2023-02-22

【中文标题】用户按 Enter 时未提交 Javascript 登录表单

【英文标题】：Javascript login form doesn't submit when user hits Enter

【发布时间】：2010-09-19 08:08:46

【问题描述】：

我正在为一个网站做一个简单的 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”，但我不确定用什么来代替。想法？

---

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

【参考方案1】：

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

1.您最关心的问题：

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

使用提交按钮类型。

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

..而不是

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

您的问题与使用 onclick 属性没有任何关系。相反，您没有得到您想要的行为，因为您使用了 button 输入类型，它的行为方式与提交按钮的行为方式完全不同。

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

例如：

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

2。安全问题：

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

如果有人直接对这些问题感兴趣，这里是关于 SO 的相关主题的链接，而不是拖拉。

Is there some way I can do a user validation client-side?

Encrypting Ajax calls for authentication in jQuery

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>

【讨论】：

这看起来相当不错。几个快速的问题： 1. 我在这段代码的哪里设置用户名和密码？ 2. 如果我将 javascript 放在外部文件中并链接到它，这对安全性有帮助吗？非常感谢您的详尽回答！

3. （哈哈，很抱歉很烦人。我真的很感谢您的帮助！）似乎使用您的代码，我输入的用户名和密码都没有关系，它只是重定向到album.html。我该如何解决？

Re: 1 & 3，我已经修改了上面的示例代码，使其更清楚地了解正在发生的事情。看看它是否有帮助。

Re: 2 将 js 放入外部文件将无济于事。安全的方法是允许表单通过 https 向服务器提交值，并控制服务器上的登录。完全解释这个问题有点多，但我可以推荐一些资源或提出一个新问题..

【参考方案2】：

使用 代替 。您可以将验证代码放在表单 onsubmit 处理程序中：

【参考方案3】：

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

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

【讨论】：

我可以为输入中的特定页面添加 href 吗？

【参考方案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>

【参考方案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>

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

【参考方案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>

【参考方案7】：

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

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

用户点击按钮。 用户按下回车键。

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

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

然后您的代码将为这两个事件运行。