Similar Posts

Capturar la tecla CONTROL mediante Javascript

ByLuis

A la hora de darle una funcionalidad más enfocada a aplicaciones de escritorio (por ejemplo con un editor WYSIWYG), suele ser necesario usar combinaciones de teclas CONTROL+tecla para ejecutar ciertas acciones.

Capturar la combinacion CTRL+tecla en javascript es muy sencillo:

var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
// acción para CTRL+S y evitar que ejecute la acción propia del navegador
return false;
}
}/

La explicación es sencilla, cuando se pulsa CTRL+tecla se producen dos eventos de teclado, por lo que no es posible saber si se ha ejecutado en una sola llamada. Por ello primero comprobamos si se pulsa la tecla CTRL y se pone un flag a verdadero y luego dependiendo de la tecla que queramos, si se detecta que se pulsa y está el flag activo, se realiza la acción. Hay que devolver false para que el navegador no ejecute la acción que tiene por defecto. Cuando se deja de pulsar la tecla CTRL se pone el flag a false.

How to create Ctrl+Key shortcuts in Javascript

Nitobi UI: elementos UI para javascript

ByLuis

Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:

  • Grid: tabla con celdas estilo hoja de cálculo
  • TreeGrid: igual que el anterior pero permite desplegar filas
  • ComboBox: un combo mas interactivo, como los de auto-sugerencias
  • TabStrip: gestión de pestañas
  • Tree: árbol de datos, tipo directorios/ficheros
  • FishEye: aumentar elementos con efecto “ojo de pez”
  • Callout: mensajes popup en plan bocadillo
  • Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
  • Calendar: calendarios
  • Toolkit: herramientas varias para Ajax

Nitobi UI

Evitar spam en formularios mediante Javascript

ByLuis

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

Sincronicar scrolls entre capas con jQuery

ByLuis

Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan

jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}

Synchronizing Scrollbars using JQuery

5 Comments

Comments are closed.