为什么“输入”不适用于我的表格？

Question

这是代码，我不知道为什么输入/返回不起作用！ 是因为它是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，所以任何帮助都很棒！

UPDATE

谢谢你的帮助。 集成后仍无法正常工作。 当我按回车键时，该页面不会加载home.html 。 相反，我没有刷新，并且地址栏中的url http://example.com/?pass=password 。

如果我单击按钮，它将加载home.html ！

谢谢！

Answer 1

您错过了<input type="submit"> ，如果没有它，就不能使用Enter键提交表单。

Answer 2

在这里，我用工作示例编写了一个JSFiddle 。

在HTML代码中：

• 删除onKeyDown="e.keyCode == 13;" 来自<input>文本元素。
• 从<input>按钮元素中删除onClick="TheLogin(this.form)" 。
• 将输入按钮的类型从“按钮”更改为“提交”。 这样，当您在输入文本表单中按“输入”时，将提交表单。
• 拦截表单中的“ 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";
    }
}