当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > JavaScript 键盘事件

JavaScript 键盘事件

JavaScript 键盘事件

JavaScript提供了用于选择、输入和使用特定形式信息的键盘事件。事件在按下和松开按键时发生。我们可以使用html标签、JavaScript函数或addEventListener事件。它是与用户交互表单和其他元素一起工作的键盘功能。KeyboardEvent对象负责处理键盘事件。

键盘事件的类型

JavaScript提供了以下类型的事件来使用键盘功能。

  • 按键按下事件： 按键按下事件在按键按下并且按键被按下一段时间后持续重复。
  • 按键松开事件： 当按下标点符号、数字或字母键时，触发按键松开事件并启动功能。
  • 按键释放事件： 当用户释放按键时，触发按键释放事件并启动功能。某些浏览器不再支持按键释放事件。

Javascript按键按下事件

当按键被按下并且处于键盘的按下位置时，Javascript按键按下事件会在应用程序中起作用。键盘事件适用于网页的输入值，如表单、搜索栏和其他元素。

语法

以下按键按下事件的语法显示了键盘按键位置及其应用。

  • 在HTML中
<input type = "text" id = "input_class" onkeydown = "keyDownFunction()">
  • 在Javascript中
<script>
var demoObj = document.getElementById("input_class");
demoObj.onkeydown = keyDownFunction;
</script>
  • 在addEventListener事件中
<script>
var demoObj = document.getElementById("input_class");
demoObj.addEventListener("keydown", keyDownFunction);
</script>

示例

javascript key-down 函数使用了HTML标签和一个javascript函数。

示例1

在key-down函数执行后，警告选项卡会显示用户自定义的功能。用户交互元素的输入标签。

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "text" id = "input_class" placeholder = "write here." onkeydown = "keyDownFunction()">
<p id = "datas"> </p>
<script>
function keyDownFunction() {
alert("JavaScript keyDown function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
}
</script>
</body>
</html>

输出

该警示框显示了按键按下事件的输出。

示例2

JavaScript的键盘按下函数使用了HTML标记和一个JavaScript函数。在键盘按下函数之后，我们可以改变容器的样式标记。

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "text" id = "input_class" placeholder = "write here.">
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("input_class");
demoObj.onkeydown = keyDownFunction;
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

输出

警示框显示keydown事件的输出。

JavaScript 键盘事件

示例3

addEventListener事件使用Javascript处理键盘按下事件。键盘按下事件可以用于单个或多个单选按钮，使用标签。

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "radio" id = "input_class" placeholder = "write here."> Good
<input type = "radio" id = "input_class" placeholder = "write here."> Better
<input type = "radio" id = "input_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("input_class");
demoObj.addEventListener("keydown", keyDownFunction);
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}  
</script>
</body>
</html>

输出

警示框显示了keydown事件的输出。

JavaScript 键盘事件

Javascript keyup事件

当按键被按下并仍然在键盘的原始位置时，Javascript的keyup事件将在应用程序上生效。键盘事件适用于网页中的输入值，如表单、搜索栏和其他元素。

语法

以下keyup事件的语法显示了键盘按键位置及其应用。

  • 在HTML中
<input type = "text" id = "key_class" onkeyup = "keyUpFunction()">
  • 在JavaScript中
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeyup = keyUpFunction;
</script>
  • 在 addEventListener 事件中
<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keyup", keyUpFunction);
</script>

示例

javascript的keyup函数使用html标记和javascript函数。

示例1

在keyup函数运行后，弹出消息框显示用户自定义的功能。

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
</div>
<input type = "text" id = "key_class" placeholder = "write here." onkeyup = "keyUpFunction()">
<p id = "datas"> </p>
<script>
function keyUpFunction() {
alert("JavaScript keyUp function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
}
</script>
</body>
</html>

输出

警告框显示了键盘按下事件的输出。

JavaScript 键盘事件

示例2

javascript的keyup函数使用html标签和javascript函数。在keyup函数之后，我们可以更改容器的样式标签。

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
<textarea id = "key_class" placeholder = "write message here."> </textarea>
<p id = "datas"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeyup = keyUpFunction;
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px solid red";
document.getElementById("demoDIV").style.color= "Green";
}
</script>
</body>
</html>

输出

网页显示键盘弹起事件的输出结果。

JavaScript 键盘事件

示例3

addEventListener事件使用JavaScript处理键盘弹起事件。keyup事件适用于使用input标签的单个或多个复选框按钮。

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
</div>
<input type = "checkbox" id = "key_class" placeholder = "write here."> Good
<input type = "checkbox" id = "key_class" placeholder = "write here."> Better
<input type = "checkbox" id = "key_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keyup", keyUpFunction);
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

输出

这个网页显示了键盘松开事件的输出。

JavaScript 键盘事件

JavaScript keypress事件

当按键按下并仍然在键盘的原始位置时，JavaScript keypress事件会在应用程序上起作用。键盘事件适用于网页的输入值，如表单、搜索栏和其他元素。

语法

以下keypress事件的语法显示了键盘按键的位置及其应用。

  • 在HTML中
<input type = "text" id = "key_class" onkeypress = "keyPressFunction()">
  • 在Javascript中
<script>
demoObj.onkeypress = keyPressFunction;
</script>
  • 在addEventListener事件中
<script>
demoObj.addEventListener("keypress", keyPressFunction);
</script>

示例

javascript的keypress函数使用了HTML标签和javascript函数。

示例1

弹窗消息在keypress函数运行后显示用户定义的功能。你可以看到keypress函数在input标签上起作用，但在button标签上不起作用。如果你在input标签中使用submit类型，那么事件也不起作用。

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag.
</div>
<input type = "text" id = "key_class" placeholder = "write here." onkeypress = "keyPressFunction()">
<button type = "button" onkeypress = "keyPressFunction2()">
Click here... </button>
<p id = "datas"> </p>
<script>
function keyPressFunction() {
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
}
function keyPressFunction2() {
alert("JavaScript keyPress function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
}
</script>
</body>
</html>

输出

弹出框显示按键事件的输出。

JavaScript 键盘事件

示例2

Javascript的keypress函数使用HTML标签和Javascript函数。我们可以在keypress函数之后更改容器的样式标签。 文本类型的输入标签和纹理标签适用于keypress函数。

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag. <br>
<textarea id = "key_class" placeholder = "write message here."> </textarea>
<p id = "datas"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeypress = keyPressFunction;
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px solid yellow";
document.getElementById("demoDIV").style.color= "Green";
}
</script>
</body>
</html>

输出

网页显示按键事件的输出。

JavaScript 键盘事件

示例3

addEventListener事件用于使用javascript的keypress事件。keypress事件适用于单个或多个复选框按钮，使用input标签。

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag.
</div>
<input type = "checkbox" id = "key_class" placeholder = "write here."> Good
<input type = "checkbox" id = "key_class" placeholder = "write here."> Better
<input type = "checkbox" id = "key_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keypress", keyPressFunction);
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

输出

网页显示键盘按键事件的输出结果。

JavaScript 键盘事件

键盘事件流程图

以下顺序用于在网页上操作键盘事件：

  • 按下事件是键盘功能的第一个事件。如果按下按键会生成一个字符，并且按键保持按下状态更长时间，事件会在页面上重复发生。
  • 按键事件是第二个触发的事件，只要按键在输入标签上保持按下状态，事件就会重复发生。每次按键在输入标签上按下时都会触发。
  • 松开事件是键盘功能的最后一个事件。当按键从键盘上释放时，该功能在页面上操作。

示例

以下示例展示了带有流程图功能的键盘事件。我们可以获取带有值的键盘事件以及触发该值的事件。我们可以将所有功能与输出值一起使用。在这里，我们可以使用addEventListener事件或html函数标签来操作功能。

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript key down, keypress and keyup events work after entering, pressing, and releasing keys, respectively, in the javascript using the specific tag. <br>
<input type="text" id="key_class" placeholder="write message here." />
<p id = "datas"> </p>
<p id = "status"> </p>
<p id = "status1"> </p>
<p id = "status2"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeydown = keyDownFunction;
demoObj.onkeypress = keyPressFunction;
demoObj.onkeyup = keyUpFunction;
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keydown function activates successfully!!!";
document.getElementById("status").innerHTML = `<b>keydown: </b> {event.key}   <b>keyCode: </b>{event.code}  <br>`;
}
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("status1").innerHTML = `<b>keypress: </b> {event.key}   <b>keyCode: </b>{event.code}  <br>`;
}
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyup function activates successfully!!!";
document.getElementById("status2").innerHTML = `<b>keyup: </b> {event.key}   <b>keyCode: </b>{event.code}  <br>`;
}
</script>
</body>
</html>

输出

网页显示按键按下、按键按下和按键松开事件作为输出。

JavaScript 键盘事件

键盘事件的常见用途

计算机游戏是当今键盘事件的最受欢迎的应用之一。大多数基于浏览器的游戏在某种程度上要求键盘输入。根据键盘事件不同，游戏对象会有不同的响应。此外，本教程将展示游戏中如何实现键盘事件。

示例

以下示例展示了具有流程图功能的键盘事件。我们可以使用JavaScript函数在游戏应用程序中获取键盘事件。

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
.datas {
background-color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
Use the arrow keys to control the square object.
<svg width="200px" height="200px" class="datas">
<rect id="objectval1" x="10" y="10" width="15" height="15" fill="yellow" />
</svg>
<script>
// Declare and assign variables.
let objectval1Size = {
width: 15,
height: 15
};
let position = {
x: 10,
y: 10
};
let moveRate = 10;
let objectval1 = document.getElementById("objectval1");
function updateYPosition(distance) {
position.y = position.y - distance;
// Update the y-axis position at the edge.
if (position.y < 0) {
position.y = 249;
} else if (position.y > 249) {
position.y = 0;
}
}
// Update x-axis position.
function updateXPosition(distance) {
position.x = position.x + distance;
// Update the x-axis position at the edge.
if (position.x < 0) {
position.x = 499;
} else if (position.x > 499) {
position.x = 0;
}
}
function refreshEventPosition() {
let x_val = position.x - (objectval1Size.width/2);
let y_val = position.y - (objectval1Size.height/2);
let transform = "translate(" + x_val + " " + y_val + ")";
objectval1.setAttribute("transform", transform);
}
window.addEventListener("keydown", function(event) {
if (event.defaultPrevented) {
return;
}
if (event.code === "ArrowDown"){
// Handle key "down"
updateYPosition(-moveRate);
} else if (event.code === "ArrowUp"){
// Handle key "up."
updateYPosition(moveRate);
} else if (event.code === "ArrowLeft"){
// Handle key "left"
updateXPosition(-moveRate);
} else if (event.code === "ArrowRight"){
// Handle key "right."
updateXPosition(moveRate);
}
refreshEventPosition();
event.preventDefault();
}, true);
</script>
</body>
</html>

输出

网页显示游戏应用程序中按键按下、按键按下和按键抬起事件的输出。

JavaScript 键盘事件

不同的按键操作

键盘事件适用于字母、数字和特殊字符的按键事件。我们可以获取其他按键事件，如alt、control、arrow、tab、caps lock等。

示例

该示例显示了从键盘上按下的键和显示的事件信息。我们可以使用其他键盘事件和javascript函数来获取事件信息。

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<h4> The altKey Property </h4>
 We can Press a key on the keyboard in the input field to get the respective key is the ALT key or not.
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
if (event.altKey) {
var1.innerHTML = "The ALT key press successfully with keydown event!";
} else {
var1.innerHTML = "The other press (ALT key does not) successfully with keydown event!!";
}
}
</script>
</body>
</html>

输出

按下键事件显示了alt键的功能。

JavaScript 键盘事件

结论

键盘事件在用户交互功能使用按键时起作用。在网页上，按键与按下、抬起和按下的事件配合使用。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程