JavaScript的登录表单不提交在用户点击进入 [英] Javascript login form doesn't submit when user hits Enter
问题描述
我工作的一个网站一个简单的JavaScript登录，并想出了这一点：
I'm working on a simple javascript login for a site, and have come up with this:
<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>
...除了一件事作品：按回车键提交表单没有做任何事情。我有一种感觉它的原因我用的onclick，但我不知道改用什么。思考？
...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?
好耶，所以我很清楚如何脆弱，这是安全的，明智的。这不是什么特别绝密，所以它不是一个大问题，但如果你们能与code你的想法细说了，我很想看到你的想法。在code I所列简直是所有我在这一点的工作，所以我可以从头开始如果需要的话。
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.
推荐答案
有几个主题，在这里曾经被讨论。让我们试图澄清。
There are several topics being discussed at once here. Let's try to clarify.
1。你杀到：
（为什么不输入按钮工作的时候ENTER并pressed？的）
使用提交按钮类型。
<input type="submit".../>
..而不是
<input type="button".../>
您的问题并没有真正有什么关系已经使用了的onclick 属性。相反，你没有得到你想要，因为你已经使用了按钮输入类型，它只是不表现的提交按钮的方式相同的行为。
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.
在HTML和XHTML，也有某些元素的默认行为。表格上的输入按钮往往是类型为提交。在大多数浏览器，默认情况下提交按钮的火输入的时候是在同一个表单元素从焦点元素的 pssed $ P $。该键输入类型没有。如果你想利用这一默认行为的优势，你可以改变你的输入类型为提交。
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".
例如：
<form action="/post.php" method="post">
<!--
...
-->
<input type="submit" value="go"/>
</form>
2。安全问题：
的 @Ady 的提及安全问题。有在JavaScript中做的登录相关的安全问题一整桶。这些可能是超出了此问题的域，特别是因为你已经表明，你是不是特别担心它，而事实上，你的登录方法实际上只是放在location.href设置一个新的HTML页（表明你可能没有到位任何真正的安全机制）。
@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).
相反耐劳，最多的，这里的上SO相关主题的链接后，如果有人有兴趣直接这些问题。
Instead of drudging that up, here are links to related topics on SO, if anyone is interested in those questions directly.
3。其他问题：
下面是一个快速清理您的code，这只是遵循一些最佳做法。它不解决安全关切，有人提到。相反，我这包括单纯的说明一些健康的生活习惯。如果您有关于为什么我写的东西以某种方式的具体问题，随意问。此外，浏览堆栈相关主题（你的问题可能已经在这里讨论）。
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).
要注意的主要事情是在清除事件的属性（适用的onclick =的onsubmit =，或安其preSS =）从HTML。那些属于在JavaScript，并且它被认为是最好的做法，以保持JavaScript事件出来的标记。
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.
<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>
这篇关于JavaScript的登录表单不提交在用户点击进入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
