Javascript getModifierState() KeyboardEvent 方法

2025年3月18日 | 阅读时长 4 分钟

Javascript getModifierState() KeyboardEvent 用于了解键盘上的哪个按键被按下。如果修饰键被按下或点击，事件将返回 true。我们可以使用按下的、点击的键以及键盘事件来激活该函数。

语法

该语法使用 javascript 标签来使用 getModifierState() KeyboardEvent。

描述： Modifier_key 用于按下或点击键盘按钮。

按键修饰符

当按下时，修饰键会工作或触发

Alt
移位
AltGraph
控制
Meta

点击的键修饰符

当点击并取消激活时，修饰键会工作或触发

NumLock
CapsLock
ScrollLock

示例

以下示例展示了带有方法的 getModifierState() KeyboardEvent。

示例 1

该示例显示了键盘上按下了哪个键，并显示了事件信息。我们可以使用其他键盘事件和 javascript 函数来获取事件信息。键盘按下事件显示并操作 alt 键按钮。

<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method
</title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> Javascript getModifierState() KeyboardEvent Method </h2>
<h4> The altKey Property with JavaScript keydown Method <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the ALT key or not.</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("Alt");
if (event.altKey) {
var1.innerHTML = "The Alt key press successfully with keydown event: "+x_var;
} else {
var1.innerHTML = "The other press (ALT key does not) successfully with keydown event: " +x_var;
}
}
</script>
</body>
</html>

输出

keydown 事件显示 alt 键的功能。

Javascript getModifierState() KeyboardEvent Method

示例 2

该示例显示了键盘上按下了哪个键，并显示了 shift 事件信息。如果按下 shift 键，则输出显示 true，否则显示 false。键盘事件显示并操作 shift 按下按钮。

<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the SHIFT key or not.</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("Shift");
if(x_var == true){
var1.innerHTML = "The Shift key press successfully with keydown event: "+x_var;
}else{
var1.innerHTML = "The Shift key does not press successfully with keydown event: "+x_var;
}
}
</script>
</body>
</html>

输出

keydown 事件显示 alt 键的功能。

示例 3

该示例显示了键盘上按下了哪个键，并显示了 numlock 事件信息。键盘事件显示并操作 numlock 按钮。

<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the NumLock key or not.</p>
<input type = "text" onkeyup = "keyUPFunction(event)">
<p id = "demos"></p>
<script>
function keyUPFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("NumLock");
var1.innerHTML = "The NumLock key press successfully with keyup event: "+x_var;
}
</script>
</body>
</html>

输出

keydown 事件显示 alt 键的功能。

示例 4

该示例显示了键盘上按下了哪个键，并显示了 capslock 事件信息。键盘事件显示并操作 capslock 按钮。

<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key. Is the CapsLock key or not?</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("CapsLock");
var1.innerHTML = "The CapsLock key press successfully with keydown event: "+x_var;
}
</script>
</body>
</html>

输出

keydown 事件显示 alt 键的功能。

结论

getModifierState 键盘事件在特定按键与函数一起操作以实现用户交互功能时工作。按键功能与网页的向上、向下和按下事件一起工作。

下一主题JavaScript 仅数字正则表达式

Javascript getModifierState() KeyboardEvent 方法

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript getModifierState() KeyboardEvent 方法

语法

示例

结论

相关帖子

如何迭代 JavaScript 对象

JavaScript onkeyup 事件

PolyFill JS

如何在 JavaScript 中编写函数

JavaScript Confirm

JavaScript 中的柯里化 (Currying)

Mouseout 事件在 javascript 中的用法

从 JavaScript IndexedDB 删除数据

JavaScript 中的 mousemove 事件

检查 JavaScript 中的数组是否为空、null 或 undefined

订阅 Tpoint Tech

联系信息

关注我们

教程