当用户点击Enter时，Javascript登录表单不会提交

I'm working on a simple javascript login for a site, and have come up with this:

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

...which works except for one thing: hitting enter to submit the form doesn't do anything. I have a feeling it's cause I've used "onclick" but I'm not sure what to use instead. Thoughts?

...除了一件事以外的工作:点击输入提交表格不做任何事情。我有一种感觉,因为我使用了“onclick”,但我不确定要使用什么。思考?

---

Okay yeah so I'm well aware of how flimsy this is security-wise. It's not for anything particularly top secret, so it's not a huge issue, but if you guys could elaborate on your thoughts with code, I'd love to see your ideas. the code i listed is literally all I'm working with at this point, so I can start from scratch if need be.

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

7 个解决方案

#1

There are several topics being discussed at once here. Let's try to clarify.

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

1. Your Immediate Concern:

1.您的直接关注:

(Why won't the input button work when ENTER is pressed?)

(当按下ENTER时,为什么输入按钮不起作用?)

Use the submit button type.

使用提交按钮类型。

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

..instead of

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

Your problem doesn't really have anything to do with having used an onclick attribute. Instead, you're not getting the behavior you want because you've used the button input type, which simply doesn't behave the same way that submit buttons do.

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

In HTML and XHTML, there are default behaviors for certain elements. Input buttons on forms are often of type "submit". In most browsers, "submit" buttons fire by default when ENTER is pressed from a focused element in the same form element. The "button" input type does not. If you'd like to take advantage of that default behavior, you can change your input type to "submit".

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

For example:

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

2. Security concerns:

2.安全问题:

@Ady mentioned a security concern. There are a whole bucket of security concerns associated with doing a login in javascript. These are probably outside of the domain of this question, especially since you've indicated that you aren't particularly worried about it, and the fact that your login method was actually just setting the location.href to a new html page (indicating that you probably don't have any real security mechanism in place).

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

Instead of drudging that up, here are links to related topics on SO, if anyone is interested in those questions directly.

如果有人直接对这些问题感兴趣,那么这里有关于SO的相关主题的链接,而不是讨价还价。

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

有什么方法可以做客户端的用户验证吗?

• Encrypting Ajax calls for authentication in jQuery

加密Ajax调用jQuery中的身份验证

3. Other Issues:

3.其他问题:

Here's a quick cleanup of your code, which just follows some best practices. It doesn't address the security concern that folks have mentioned. Instead, I'm including it simply to illustrate some healthy habits. If you have specific questions about why I've written something a certain way, feel free to ask. Also, browse the stack for related topics (as your question may have already been discussed here).

这里是您的代码的快速清理,它遵循一些最佳实践。它没有解决人们提到的安全问题。相反,我只是为了说明一些健康的习惯而将其包括在内。如果您对我为何以某种方式撰写某些内容有具体的疑问,请随时提出。此外,浏览堆栈以查找相关主题(因为您的问题可能已在此处讨论)。

The main thing to notice is the removal of the event attributes (onclick="", onsubmit="", or onkeypress="") from the HTML. Those belong in javascript, and it's considered a best practice to keep the javascript events out of the markup.

需要注意的主要事项是从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>

#2

Instead of <input type="button">, use <input type="submit">. You can put your validation code in your form onsubmit handler:

而不是,使用。您可以将验证代码放在表单上的提交处理程序中:

<form id="loginwindow" onsubmit="validate(...)">

#3

it's because it's not a form submitting, so there's no event to be triggered when the user presses enter. An alternative to the above form submit options would be to add an event listener for the input form to detect if the user pressed enter.

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

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

#4

Put the script directly in your html document. Change the onclick value with the function you want to use. The script in the html will tell the form to submit when the user hits enter or press the submit button.

将脚本直接放在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

Maybe you can try this:

也许你可以试试这个:

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

As others have pointed out, there are other problems with your solution. But this should answer your question.

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

#6

Surely this is too unsecure as everyone can crack it in a second ...

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

-- only pseudo-secure way to do js-logins are the like:

- 只有伪安全的方式来执行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

My Thought = Massive security hole. Anyone can view the username and password.

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

More relevant to your question: - You have two events happening.

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

1. User clicks button.

用户点击按钮。

2. User presses enter.

用户按下回车键。

The enter key submits the form, but does not click the button.

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

By placing your code in the onsubmit method of the form the code will run when the form is submitted. By changing the input type of the button to submit, the button will submit the form in the same way that the enter button does.

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

Your code will then run for both events.

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