teclado - Manejo de eventos de pulsación de teclas(F1-F12) usando JavaScript y jQuery, navegador cruzado
keyup jquery ejemplos (12)
Quiero manejar las teclas F1-F12 usando JavaScript y jQuery.
No estoy seguro de cuáles son las dificultades que hay que evitar, y actualmente no puedo probar las implementaciones en otros navegadores distintos de Internet Explorer 8, Google Chrome y Mozilla FireFox 3.
¿Alguna sugerencia para una solución completa de navegador cruzado? Algo así como una biblioteca jQuery bien probada o tal vez simplemente jQuery / JavaScript vainilla?
Cuando usa angular.js para manejar eventos, debe usar ng-keydown para evitar pause in developer en chrome.
Esto funciona para mí
if(code ==112) { alert("F1 was pressed!!"); return false; }
F2 - 113, F3 - 114, F4 - 115, y tan fuerte.
Estoy de acuerdo con William en que, en general, es una mala idea secuestrar las teclas de función. Dicho esto, encontré la biblioteca de shortcut que agrega esta funcionalidad, así como otros atajos de teclado y combinación, de una manera muy hábil.
Un solo golpe de teclado:
shortcut.add("F1", function() {
alert("F1 pressed");
});
Combinación de teclas:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
La mejor fuente que tengo para este tipo de preguntas es esta página: http://www.quirksmode.org/js/keys.html
Lo que dicen es que los códigos de las teclas son extraños en Safari y son consistentes en todos los demás lugares (excepto que no hay ningún evento de pulsación de tecla en IE, pero creo que la tecla de acceso funciona).
Mi solución a este problema es:
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
Con el número mágico 123 que es la clave F12.
No estoy seguro de si es posible interceptar teclas de función, pero evitaría usar todas las teclas de función. Las teclas de función son utilizadas por los navegadores para realizar una variedad de tareas, algunas de ellas bastante comunes. Por ejemplo, en Firefox en Linux, al menos seis o siete de las teclas de función están reservadas para el uso del navegador:
- F1 (Ayuda),
- F3 (Búsqueda),
- F5 (Refrescar),
- F6 (barra de direcciones de enfoque),
- F7 (modo de navegación del cursor),
- F11 (modo de pantalla completa), y
- F12 (utilizado por varios complementos, incluido Firebug)
La peor parte es que diferentes navegadores en diferentes sistemas operativos usan diferentes claves para diferentes cosas. Esas son muchas diferencias que explicar. Debe seguir las combinaciones de teclas más seguras y menos utilizadas.
Pruebe esta solución si funciona.
window.onkeypress = function(e) {
if ((e.which || e.keyCode) == 116) {
alert("fresh");
}
}
Sin otra clase externa puede crear su código de hack personal simplemente usando
event.keyCode
Otra ayuda para todos, creo que es esta página de prueba para interceptar el código clave (simplemente copie y pase en nuevo archivo.html para probar su evento).
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td> </td><td> </td><td> </td>
</tr>
<tr>
<th>charCode</th><td> </td><td> </td><td> </td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='' ''};">CLEAR</button>
</body>
</html>
Aquí hay una demostración en funcionamiento para que pueda probarlo aquí:
var t_cel, tc_ln;
if (document.addEventListener) { //code for Moz
document.addEventListener("keydown", keyCapt, false);
document.addEventListener("keyup", keyCapt, false);
document.addEventListener("keypress", keyCapt, false);
} else {
document.attachEvent("onkeydown", keyCapt); //code for IE
document.attachEvent("onkeyup", keyCapt);
document.attachEvent("onkeypress", keyCapt);
}
function keyCapt(e) {
if (typeof window.event != "undefined") {
e = window.event; //code for IE
}
if (e.type == "keydown") {
t_cel[0].innerHTML = e.keyCode;
t_cel[3].innerHTML = e.charCode;
} else if (e.type == "keyup") {
t_cel[1].innerHTML = e.keyCode;
t_cel[4].innerHTML = e.charCode;
} else if (e.type == "keypress") {
t_cel[2].innerHTML = e.keyCode;
t_cel[5].innerHTML = e.charCode;
}
}
window.onload = function() {
t_cel = document.getElementById("tblOne").getElementsByTagName("td");
tc_ln = t_cel.length;
}
td,
th {
border: 2px solid #aaa;
}
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th>
<th>onkeydown</th>
<th>onkeyup</th>
<th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>charCode</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='' ''};">CLEAR</button>
</body>
</html>
Solución en ES6 para navegadores modernos e IE11 (con transpilación a ES5):
//Disable default IE help popup
window.onhelp = function() {
return false;
};
window.onkeydown = evt => {
switch (evt.keyCode) {
//ESC
case 27:
this.onEsc();
break;
//F1
case 112:
this.onF1();
break;
//Fallback to default browser behaviour
default:
return true;
}
//Returning false overrides default browser event
return false;
};
Uno de los problemas al atrapar las teclas F1-F12 es que la función predeterminada también debe ser anulada . Aquí hay un ejemplo de una implementación de la tecla F1 ''Ayuda'' , con la anulación que evita la ventana emergente de ayuda predeterminada. Esta solución se puede ampliar para las teclas F2-F12 . Además, este ejemplo deliberadamente no captura las teclas de combinación , pero esto puede modificarse también.
<html>
<head>
<!-- Note: reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the ''F1'' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind(''keydown'', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == ''F1'') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert(''F1 Help key opened, '' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == ''F2'') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert(''F2 key opened, '' + keyCode);
}
});
</script>
</body>
</html>
Tomé prestada una solución similar de un artículo relacionado de SO en el desarrollo de esto. Avíseme si esto también funcionó para usted.
Wow, es muy simple. Tengo la culpa de escribir esto, ¿por qué nadie lo hizo antes?
$(function(){
//Yes! use keydown ''cus some keys is fired only in this trigger,
//such arrows keys
$("body").keydown(function(e){
//well you need keep on mind that your browser use some keys
//to call some function, so we''ll prevent this
e.preventDefault();
//now we caught the key code, yabadabadoo!!
var keyCode = e.keyCode || e.which;
//your keyCode contains the key code, F1 to F12
//is among 112 and 123. Just it.
console.log(keyCode);
});
});
Agrega un atajo:
$.Shortcuts.add({
type: ''down'',
mask: ''Ctrl+A'',
handler: function() {
debug(''Ctrl+A'');
}
});
Comience a reaccionar a los atajos:
$.Shortcuts.start();
Agregue un acceso directo a "otra" lista:
$.Shortcuts.add({
type: ''hold'',
mask: ''Shift+Up'',
handler: function() {
debug(''Shift+Up'');
},
list: ''another''
});
Activar "otra" lista:
$.Shortcuts.start(''another'');
Remove a shortcut:
$.Shortcuts.remove({
type: ''hold'',
mask: ''Shift+Up'',
list: ''another''
});
Detener (desvincular los manejadores de eventos):
$.Shortcuts.stop();