Question

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

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

Answer 1

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

这里是一个例子：

<!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属性定义表单执行时要执行的操作已提交。通常，表单数据会发送到网页上的网页用户单击“提交”按钮时的服务器。如果动作属性被省略，操作被设置为当前页面。

因此，当您在文本字段中按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>

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

我有一个带有提交按钮的简单表单。如何使“提交”按钮和Enter键提交表单？

1 个答案: