[jQuery] Utilizar Shortcut Keys en tus páginas Web, Ejemplo para grabar y bloquear pantalla.
Hola que tal?, este tip surgió de la necesidad de “pseudo bloquear” una aplicación web mediante el uso de una combinación de teclas, sin embargo, este ejemplo va un poco más allá y veremos también como utilizar los shortcut para que con Ctrl + S podamos grabar asíncronamente en la base de datos. Entonces, hay dos ideas principales de este post, bloquear y grabar.
Entonces, vamos a utilizar un formulario bastante sencillo, que tiene un textarea y un div con id mensaje para mostrar el aviso sobre el estado de la grabación del registro.
El plugin que vamos a utilizar se llama hotkeys y está creado por J.Resig, creado de jQuery, pueden verlo en:
https://github.com/jeresig/jquery.hotkeys
Primer Caso, Grabar con Ctrl + S
La idea es que al estar escribiendo un texto, con Ctrl + S podamos guardar, para mi ejemplo, son notas independientes que se irán grabando, es decir, cada vez que se graba, se crea un nuevo registro.Para ambos ejemplos (grabar y bloquear) vamos a agregar las librerías:
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.hotkeys.min.js" type="text/javascript"></script>
<script src="Scripts/modal.js" type="text/javascript"></script>
<script src="Scripts/bloqueo.ejemplo.js" type="text/javascript"></script>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
En la librería bloqueo.ejemplo.js está el código para asociar la combinación de teclas a la funcionalidad:
$(document).bind('keydown', 'ctrl+s', function (evt) {
guardaTexto();
return false;
});
La simpleza es increíble, le indicamos que combinación de teclas va a ser la que gatille el evento, luego invocamos a la función guardaTexto();
function guardaTexto() {
$("#mensaje").html("<strong>Guardando...</strong>");
var texto = $("#tx_nota").val();
$.ajax({
type: "POST",
url: "TextoWS.asmx/guardaNota",
data: "{ texto:'" + texto + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
$("#mensaje").html("Registro Grabado...");
},
failure: function (msg) {
alert(msg);
}
});
}
Como se puede ver, me estoy conectado a un webService, que el cual siemplemente guarda el texto:
<WebMethod()> _
Public Sub guardaNota(texto As String)
Dim contexto As New ContextoDataContext
Dim registro As New nota With {.nota = texto, .fecha = Date.Now}
contexto.notas.InsertOnSubmit(registro)
contexto.SubmitChanges()
End Sub
El ejemplo utiliza LinQ y el contexto es:
De todas maneras, al final del post, se adjunta el demo para que lo descargues:
A Probarlo! 
Segundo Caso, Bloquear la pantalla.
En este caso no hay llamada asíncrona, si que no debemos tratar de bloquear la pantalla para que no se puede seguir escribiendo, para esto vamos a configurar que cuando se presione Ctrl + K se bloquee la pantalla y al volver a presionar estas teclas, se desbloquee.
En vez de elegir una ventana Modal de los plugins conocidos, elegí el ejemplo de Ribosomatic, de paso excelente blog:
http://www.ribosomatic.com/articulos/ventana-modal-con-jquery-paso-a-paso/
Ya que este ejemplo no tiene la opción explícita de cerrar la ventana, entonces, nos sirve para crear el efecto de bloquear. Dentro del archivo modal.js encontraremos el código de la ventana.
Veamos el código del bloqueo:
$(document).bind('keydown', 'ctrl+k', function (evt) {
if (bloqueo_pantalla == 0) {
$("#mensaje").focus();
mostrar_msg_bloqueo();
bloqueo_pantalla = 1;
return false;
} else {
closeModal();
bloqueo_pantalla = 0;
return false;
}
});
Voy a mantener la variable bloqueo_pantalla para hacer el cambio de bloqueo a desbloqueo cada vez que se presione Ctrl + K. Algo importante es sacar el foco desde un campo input, por que si al momento de presionar la ctrl+k el cursor está sobre, por ejemplo, una caja de texto, se podrá seguir escribiendo, es por eso que enviamos el foco a un DIV, en este caso, mensaje.
También es necesario, por lo menos para mi , bloquear la tecla F5, por lo que voy a agregar otro código:
$("body").keydown(function () {
var tecla = window.event.keyCode;
if (tecla == 116) {
event.keyCode = 0;
event.returnValue = false;
}
});
El código del F5 es el 116, y anulamos el evento.
A Probarlo!
Como vez, el efecto es el deseado, puedes cambiar el contenido de la ventana modal en el archivo modal.js.
Te dejo el código completo para que lo descargues:
Espero que te sirva!!
Nos vemos!!