极客教程如何用JavaScript或jQuery检查大写锁定是否开启
这项工作是使用JavaScript和jQuery来确定大写锁定是否开启。
使用JavaScript检查大写锁定是否打开/关闭：
- addEventListener() 方法。这个方法在文档中添加一个事件处理程序。
语法:
document.addEventListener(event, function, useCapture)
参数:
- event。这个参数是必需的。它指定了字符串，即事件的名称。
-
function。这个参数是必需的。它指定了事件发生时要运行的函数。当事件发生时，一个事件对象被作为第一个参数传给该函数。其类型取决于指定的事件。例如，”点击 “事件属于MouseEvent对象。
- useCapture。这个参数是可选的。它指定了一个布尔值，意味着该事件是否应该在捕获或冒泡阶段执行。
- true: 事件处理程序在捕获阶段执行。
- false:事件处理程序在冒泡阶段被执行。
例子1：这个例子在文档中添加了一个事件监听器，当它发生时，调用一个匿名函数来处理。该函数通过使用按钮的keyCode来检查是CAPS LOCK还是SHIFT键。
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML =
"Type anywhere on the page to check if CAPS LOCK is ON";
var down = document.getElementById('GFG_DOWN');
document.addEventListener('keypress', function(e) {
e = (e) ? e : window.event;
var charCode = false;
if (e.which) {
charCode = e.which;
}
else if (e.keyCode) {
charCode = e.keyCode;
}
var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
}
else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}
if (charCode >= 97 && charCode <= 122 && shifton) {
down.innerHTML = "Caps Lock is On";
return;
}
if (charCode >= 65 && charCode <= 90 && !shifton) {
down.innerHTML = "Caps Lock is On";
return;
}
down.innerHTML = "Caps Lock is Off";
return;
});
</script>
</body>
</html>
输出:
- 在点击文件之前。
- 在点击文件后。
例子2：这个例子给文档添加了一个事件监听器，当它发生时，它会检查是否按下了Caps LOCK。
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML = "Press the CAPS LOCK";
var down = document.getElementById('GFG_DOWN');
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
down.innerHTML = "CAPS LOCK is On";
} else {
down.innerHTML = "CAPS LOCK is Off";
}
});
</script>
</body>
</html>
输出:
- 在点击文件之前。
- 在点击文件后。
使用jQuery检查大写锁定是否开启：。
- jQuery on()方法。这个方法为选定的元素和子元素添加一个或多个事件处理程序。
语法:
$(selector).on(event, childSelector, data, function, map)
参数:
- event。这个参数是必需的。它指定了一个或多个事件或命名空间，以附加到选定的元素。在有多个事件值的情况下，这些值用空格分隔。事件必须是一个有效的。
- childSelector。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
- data。这个参数是可选的。它指定了要传递给函数的额外数据。
- function。这个参数是必需的。它指定了事件发生时要运行的函数。
- map。它指定了一个事件地图（{event:func(), event:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时要运行的函数。
- JavaScript String toUpperCase() 方法。该方法将一个字符串转换为大写字母。
语法:
string.toUpperCase()
返回值：它返回一个字符串，代表一个转换为大写的字符串的值。
- JavaScript String toLowerCase() 方法。该方法将一个字符串转换为小写字母。
语法:
string.toLowerCase()
返回值：它返回一个字符串，代表一个转换为小写字母的字符串值。
例子1：这个例子在文档正文中添加了一个事件监听器，当它发生时，调用一个匿名函数来处理。通过使用toUpperCase(), toLowerCase()和shiftkey来检查是CAPS LOCK还是SHIFT键。
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
('#GFG_UP').
text("Type anywhere on the page to check if CAPS LOCK is ON");
("#body").on('keypress', function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s
&& !e.shiftKey) || (s.toUpperCase() !== s &&
s.toLowerCase() === s && e.shiftKey)) {
('#GFG_DOWN').text("Caps Lock is ON");
}
else if ((s.toLowerCase() === s && s.toUpperCase() !== s
&& !e.shiftKey) || (s.toLowerCase() !== s
&& s.toUpperCase() === s && e.shiftKey)) {
('#GFG_DOWN').text("Caps Lock is OFF");
}
});
</script>
</body>
</html>
输出:
- 在文件上打字之前。
- 在文件上打字后。
例子2：这个例子与前一个例子相同，但采用了不同的方法。在文档中添加一个事件监听器，当它发生时，检查是否按下了Caps LOCK。
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
('#GFG_UP').text("Turn On the Caps Lock and type on screen");
('#body').on('keypress', function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('Caps Lock is on');
} else {
alert('Caps Lock is off');
}
});
</script>
</body>
</html>
输出:
- 在文件上打字之前。
- 在文件上打字后。
