Para detectar la combinación de teclas con “Ctrl”, usamos la propiedad ctrl del evento keydown . Devuelve un valor «booleano» para indicar si se presionó «ctrl» o no cuando se activó el evento clave.
Sintaxis:
event.ctrlKey
Valor devuelto:
- verdadero: cuando se presionó «ctrl».
- falso: cuando no se presionó “ctrl”.
Código HTML: A continuación se muestra el código del archivo “index.html” para detectar la combinación de “Ctrl+C” y “Ctrl+V”.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie-edge"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <textarea cols="30" row="5" placeholder="Enter Text"> </textarea> <textarea cols="30" row="5" placeholder="Paste Text"> </textarea> </div> <script src="script.js"></script> </body> </html>
Código CSS: El siguiente código muestra el archivo «style.css» que se usa en el archivo HTML anterior.
.container{
display: flex;
flex-direction: column;
align-items: center;
}
textarea{
margin-top: 20px;
}
Código Javascript: A continuación se muestra el código para el archivo «script.js» que se utiliza en el archivo HTML anterior.
Javascript
document.body.addEventListener("keydown", function (ev) {
// function to check the detection
ev = ev || window.event; // Event object 'ev'
var key = ev.which || ev.keyCode; // Detecting keyCode
// Detecting Ctrl
var ctrl = ev.ctrlKey ? ev.ctrlKey : ((key === 17)
? true : false);
// If key pressed is V and if ctrl is true.
if (key == 86 && ctrl) {
// print in console.
console.log("Ctrl+V is pressed.");
}
else if (key == 67 && ctrl) {
// If key pressed is C and if ctrl is true.
// print in console.
console.log("Ctrl+C is pressed.");
}
}, false);
Producción:
- Cuando se presionó Ctrl+C:
- Cuando se presiona Ctrl+V:
