为什么 "enter" 不适用于我的表单？

Question

这是代码，我不明白为什么 enter/return 不起作用！是因为inline吗？

HTML

<div class="wrap"><form name="login" style="margin: 0px">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<input TYPE="text" NAME="pass" size="17" onKeyDown="e.keyCode == 13;"  id="fname"  class="cool"><br><input type="button" value="LOGIN"  class="asbestos-flat-button" onClick="TheLogin(this.form)">
</form>
</div>

JS

<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = 'password';

if (this.document.login.pass.value == password) {
  top.location.href="home.html";
}
else {
  location.href="index.html";
  }
}
// End hiding --->
</script>

我正在学习 JS，所以任何帮助都会非常棒！

更新

感谢您的帮助。集成后仍然无法正常工作。当我点击 enter/return 时，页面没有加载 home.html。相反，我没有刷新，地址栏有 url http://example.com/?pass=password.

如果我单击按钮，它会加载 home.html!

谢谢！

Answer 1

您错过了 <input type="submit">，没有它您将无法使用 Enter 键提交表单。

Answer 2

Here I wrote a JSFiddle 与工作示例。

在HTML代码中：

从 <input> 文本元素中删除 onKeyDown="e.keyCode == 13;"。
从 <input> 按钮元素中删除 onClick="TheLogin(this.form)"。
将输入按钮的类型从 'button' 更改为 'submit'。这样，当您在输入文本表单中按 "enter" 时，表单将被提交。
拦截表单中的"submit"事件，在<form>元素上添加onSubmit="theLogin(this.form)"。

注意： 我已将函数名称从 "TheLogin" 重命名为 "theLogin" 因为在 JavaScript 中函数以小写字母开头，如果它们不是构造函数。

HTML代码：

<div class="wrap">
    <form name="login" style="margin: 0px" onSubmit="theLogin(this.form)">
        <label for="fname">CLICK TO ENTER PASSWORD</label>
        <INPUT TYPE="text" NAME="pass" size="17" id="fname" class="cool">
        <br>
        <input type="submit" value="LOGIN" class="asbestos-flat-button">
    </form>
</div>

和 JavaScript 代码：

theLogin = function() {
    var password = 'password';

    if (this.document.login.pass.value === password) {
        top.location.href = "home.html";
    } else {
        location.href = "index.html";
    }
}

为什么 "enter" 不适用于我的表单？

Why is "enter" not working for my form?

javascript

passwords

我正在学习 JS，所以任何帮助都会非常棒！