-1

我正在使用以下代码的变体。当我按下回车键时，它会刷新整个网页，而不是提交表单。我尝试搜索，但我对编码一无所知，所以其他答案都没有帮助我，因为它们不是我的代码特有的。在此先感谢，非常感谢您的帮助！

<html>
<head>
<head>
<style>
.button {
background-color: blue; /* Green */
border: 1;
color: white;
padding: 8px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input {
width: 200px;
height: 30px;
background-color : #d1d1d1; 
border-style:groove;
}

</style>

</head>
<body>

<form name="login" method=POST>
<center>


<strong>Password:<strong>

<input  type="password" name="pswrd" onkeydown = "if (event.keyCode == 13) 
document.getElementById('pwsubmit').click()" />
<button class="button" id="pwsubmit" type="button" 
onclick="check(this.form)" value="Login"/>Submit</button></center>


</form>
<script language="javascript">

function checkentry(e)
{


document.getElementById("pswrd")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
    document.getElementById("id_of_button").click();
}
});


}

function check(form)
{

//  The list below MUST contain all valid passwords

if (['laura', 'molly', 'katie', 'chris'].indexOf(form.pswrd.value) >= 0) {

// Go to different websites/weebly pages based on the entered password

switch(form.pswrd.value) {
  case "laura":
    window.open('http://www.bk.com','_self');
    break;
  case "molly":
    window.open('http://www.mcdonalds.com','_self');
    break;
  case "katie":
    window.open('https://www.supermacs.ie/','_self');
    break;
  case "chris":
    window.open('https://www.kfc.ie/','_self');
    break;
}
}

// Show following message if invalid password entered

else {alert("Invalid password entered!!!")}
}
</script>
</body>

4

1 回答 1

0

HTML 中表单的默认行为是 enter 键将调用 input 元素之后表单的第一个下一个提交按钮。

这是一个例子：

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form>
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <button type="submit" onclick="sayHello()">OK</button>
</form> 

<script>
function sayHello(){
	alert('Hello every body!');
}
</script>

</body>
</html>

HTML 表单有一个名为action. 该属性也有一个默认行为。这种行为如下（来自https://www.w3schools.com/html/html_forms.asp）：

action 属性定义了提交表单时要执行的操作。通常，当用户单击提交按钮时，表单数据会发送到服务器上的网页。如果省略了 action 属性，则将 action 设置为当前页面。

因此，当您在文本字段中按 Enter 键时，表单已提交并重新加载当前页面。

为了防止这种行为，您可以使用peventDefault()防止这种默认行为的功能。

因此，您的示例代码的简化编辑版本可能如下：

<!DOCTYPE html>
<html>
<body>

    <h2>HTML Forms</h2>

    <form id="myForm" onsubmit="check(event)">
        <strong>Password:<strong>

        <input  type="password" name="pswrd" />
        <button class="button" id="pwsubmit" type="button" onclick="check(event)" value="Login">Submit</button>

    </form>

    <script>

        function check(event)
        {
            event.preventDefault();
            var form = document.getElementById('myForm');

            if (['laura', 'molly', 'katie', 'chris'].indexOf(form.pswrd.value) >= 0) {
                switch(form.pswrd.value) {
                    case "laura":
                    window.open('http://www.bk.com','_self');
                    break;
                    case "molly":
                    window.open('http://www.mcdonalds.com','_self');
                    break;
                    case "katie":
                    window.open('https://www.supermacs.ie/','_self');
                    break;
                    case "chris":
                    window.open('https://www.kfc.ie/','_self');
                    break;
                }
            } else {
                    alert("Invalid password entered!!!")
            }
        }
    </script>

</body>
</html>

请注意，您的代码也有一些语法错误。

于 2018-12-03T21:05:32.330 回答