JavaScript 中的输入键事件

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的输入键事件

作者：迹忆客最近更新：2023/03/10 浏览次数：

本教程演示了每次按下 Enter 键时使用 JavaScript enter key event 停止表单提交的不同方法。

在以下示例中，我们获取 id 值为 form 的元素并将其保存到 element 变量中。

之后，addEventListener() 方法用于将事件处理程序附加到元素。每当按下 Enter 键时，都会使用 event.preventDefault() 阻止表单提交。

event.key 告诉了键的名称，event.which 显示了键的代码。

HTML 代码：

<!DOCTYPE html>
<html>
	<head>
 		<title>Enter Key Event</title>
 	</head>
	<body>
 		<form action="#" method = "POST" id="form">
 			<label>First name:</label>
 			<input type="text" id="first-name" name="first-name">
 			<br />
 
          	<label>Last name:</label>
 			<input type="text" id="last-name" name="last-name">
 			<br />
 
          	<input id="submitBtn" type="submit" value="Submit" />
 		</form>
	</body>
</html>

JavaScript 代码：

var element = document.getElementById("form");
element.addEventListener("keypress", function(event) {
	 if (event.key === "Enter") {
 		alert(event.key  + " " + event.which);
 		event.preventDefault();
     }
});

在前面的示例中，我们正在检测 <form> 元素中的 Enter。但是如果按下 Enter 键，下面给出的代码会阻止表单提交。

document.addEventListener('keypress', function (e) {
 	if (e.keyCode === 13 || e.which === 13) {
 		e.preventDefault();
 		return false;
    }
 
});

/*we can write the same logic in jQuery as follows. You
can copy the jQuery code and uncomment to practice. Make
sure to include the jQuery library.*/
/*
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
*/

click 事件不会让 Enter 键提交表单。

每次点击 id 值为 submitBtn 的元素时，都会提交表单。请参阅以下示例。

document.getElementById("submitBtn").addEventListener("click", function () {
 	form.submit(); 
});

不建议使用以下方法，因为 HTML 和 JavaScript 必须位于单独的文件中才能组织代码。

尽管如此，你也可以在 <input> 元素中使用 type=submit 中的 onkeypress 属性，如果按下Enter 键，则会阻止表单提交。

我们也可以为每个输入字段使用这个属性。检查以下示例。

HTML 代码：

<!DOCTYPE html>
<html>
	<head>
 		<title>Enter Key Event</title>
 	</head>
	<body>
 		<form action="#" method = "POST" id="form">
 			<label>First name:</label>
 			<input type="text" id="first-name" name="first-name" onkeypress="return 
			(event.keyCode!=13);">
 			<br />
 	
          	<label>Last name:</label>
 			<input type="text" id="last-name" name="last-name" onkeypress="return 
			(event.keyCode!=13);">
 			<br />
 
          	<input id="submitBtn" type="submit" value="Submit" onkeypress="return 
			(event.keyCode!=13);" />
 		</form>
	</body>
</html>

我们还可以在 JavaScript 文件中创建一个单独的函数，并在单击特定按钮时调用它。只有单击该按钮，表单才会提交；否则，不是。

请参阅以下代码。

HTML 代码：

<!DOCTYPE html>
<html>
	<head>
 		<title>Enter Key Event</title>
 	</head>
	<body>
 		<form action="#" method = "POST" id="form">
 			<label>First name:</label>
 			<input type="text" id="first-name" name="first-name">
 			<br />
 
          	<label>Last name:</label>
 			<input type="text" id="last-name" name="last-name">
 			<br />
 			
          	<input id="submitBtn" type="submit" value="Submit" onclick="myfunction()" />
 		</form>
 	</body>
</html>

JavaScript 代码：

document.addEventListener('keypress', function (e) {
 	if (e.keyCode === 13 || e.which === 13) {
 		e.preventDefault();
 		return false;
    }
 
});

function myfunction() {
   document.getElementById("form").submit();
}