El trabajo es determinar si el bloqueo de mayúsculas está activado o desactivado mediante JavaScript y jQuery.
Verifique que el bloqueo de mayúsculas esté activado / desactivado usando JavaScript:
- Método addEventListener(): este método agrega un controlador de eventos al documento.
Sintaxis:
document.addEventListener(event, function, useCapture)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica la string, el nombre del evento.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento. Cuando ocurre el evento, se pasa un objeto de evento como primer parámetro a la función. El tipo depende del evento especificado. Por ejemplo, el evento «clic» pertenece al objeto MouseEvent.
- useCapture: este parámetro es opcional. Especifica un valor booleano que significa si el evento debe ejecutarse en la fase de captura o burbujeo.
- verdadero: el controlador de eventos se ejecuta en la fase de captura.
- falso: el controlador de eventos se ejecuta en la fase de burbujeo.
Ejemplo 1: este ejemplo agrega un detector de eventos al documento y, cuando sucede, llama a una función anónima para manejar esto. Que verifica si es BLOQ MAYÚS o SHIFT usando el código de tecla del botón.
<!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>
Producción:
- Antes de hacer clic en el documento:
- Después de hacer clic en el documento:
Ejemplo 2: este ejemplo agrega un detector de eventos al documento y, cuando sucede, verifica si se presiona el BLOQ MAYÚS o no.
<!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>
Producción:
- Antes de hacer clic en el documento:
- Después de hacer clic en el documento:
Verifique que el bloqueo de mayúsculas esté activado / desactivado usando jQuery:
- Método jQuery on(): este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
Sintaxis:
$(selector).on(event, childSelector, data, function, map)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados. En el caso de múltiples valores de eventos, estos están separados por espacios. El evento debe ser válido.
- childSelector: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
- map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
- Método JavaScript String toUpperCase(): este método convierte una string en letras mayúsculas.
Sintaxis:
string.toUpperCase()
Valor devuelto: Devuelve una string, que representa el valor de una string convertida a mayúsculas.
- Método JavaScript String toLowerCase(): este método convierte una string en letras minúsculas.
Sintaxis:
string.toLowerCase()
Valor devuelto: Devuelve una string, que representa el valor de una string convertida a minúsculas.
Ejemplo 1: este ejemplo agrega un detector de eventos al cuerpo del documento y, cuando ocurre, llama a una función anónima para manejar esto. Que verifica si es BLOQ MAYÚS o SHIFT usando toUpperCase(), toLowerCase() y shiftkey .
<!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>
Producción:
- Antes de escribir en el documento:
- Después de escribir en el documento:
Ejemplo 2: Este ejemplo hace lo mismo que el ejemplo anterior pero con un enfoque diferente. Agrega un detector de eventos al documento y cuando sucede, verifica si el BLOQ MAYÚS está presionado o no.
<!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>
Producción:
- Antes de escribir en el documento:
- Después de escribir en el documento:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA