2009-06-29 24 views
33

Dado que estoy usando jQuery, cualquier solución a través de eso también funcionaría. Idealmente, me gustaría saber ambos, sin embargo.¿Cómo evito el desplazamiento con las teclas de flecha pero NO el mouse?

Ya tengo las teclas de flecha vinculadas a otra función en mi página (usando jQuery), pero hacer que la página se desplace además de eso, me causa problemas.

Pude haberlo sabido al mismo tiempo, pero ya no lo recuerdo.

+0

Es un diseño UI extremadamente malo para evitar que las teclas del teclado se desplacen por el cuadro activo. Yo (y muchas otras personas) navego sobre todo con las teclas y es muy frustrante tener que usar el mouse en la página impar aquí y allá que bloquea la navegación correcta del teclado. Por supuesto, probablemente haya razones válidas para hacerlo, pero debe asegurarse de que el suyo sea uno de ellos. –

+16

Lo es. Mi aplicación web es un editor; no es una página web formal. –

+4

Estoy completamente de acuerdo en que es un mal diseño de UI evitar siempre el comportamiento estándar del navegador. Pero está completamente bien hacerlo en ciertas situaciones, imho. En mi caso, lo necesito para evitar que la página se desplace cuando el usuario avanza entre alternativas en una lista. Cuando el foco está fuera de la lista, la página se desplazará normalmente. Dentro de la lista, la página evitará desplazarse, a menos que sea necesario para mostrar el elemento seleccionado. –

Respuesta

75

Agregar controlador de teclado a nivel de documento hace el truco!

var ar=new Array(33,34,35,36,37,38,39,40); 

$(document).keydown(function(e) { 
    var key = e.which; 
     //console.log(key); 
     //if(key==35 || key == 36 || key == 37 || key == 39) 
     if($.inArray(key,ar) > -1) { 
      e.preventDefault(); 
      return false; 
     } 
     return true; 
}); 
+0

Oh limpio. Déjame darle una oportunidad ... –

+7

Maneja PgUp (33), PgDn (34), Fin (35), Casa (36), Izquierda (37), Arriba (38), Derecha (39), Abajo (40) – TheVillageIdiot

+0

¡Yay! Muchas gracias. –

1

Si se agrega un controlador de nivel de presión de tecla documento que evitará desplazamiento normal sobre la página en cualquier momento, no sólo cuando el elemento tiene el foco, esto podría ser un efecto no deseado.

2

En algunas circunstancias, ej. cuando en realidad no tienes un elemento en el que te centres, solo un área en la que debiste hacer clic, es posible que no tengas demasiado control sobre el manejador y prevenir el evento a nivel global puede ser un poco escamoso en el mejor de los casos (como descubrí por el camino difícil).

La solución más simple en esos casos es vincular el clic incluso del botón de control y centrarse en un elemento de entrada vacío que coloca -9000px a la izquierda.

Puede bloquear el evento de forma segura mediante la tecla y tampoco tener que preocuparse por bloquear el comportamiento predeterminado u otros escuchas globales ya que el comportamiento predeterminado en el elemento de entrada moverá el cursor hacia la izquierda y hacia la derecha.

Cuestiones relacionadas