2011-06-02 25 views
13

Javascript (jQuery)JQuery: Keyup, ¿cómo evito el comportamiento predeterminado de la flecha (arriba y abajo) y la tecla enter?

$('input').keyup(function(e) 
{ 
    var code = e.keyCode ? e.keyCode : e.which; 

    switch(code) 
    { 
     case 38: 
     break; 

     case 40: 
     break; 

     case 13: 
     break; 

     default: 
     return; 
    } 
}); 

HTML

<form method="post" action="/"> 
<input type="text" name="text" /> 
<button type="submit">Submit</button> 
</form> 

tengo 2 problemas:

1) El símbolo de intercalación no debe moverse cuando pulso el hasta flecha llave.

Por ejemplo, en Chrome cuando presiono la tecla hacia arriba, mueve el cursor hacia la izquierda. Pero solo tengo este problema en Chrome. Funciona bien en FF.

2) Cuando presiono el ingrese la clave, no deseo que se envíe el formulario.

Por cierto, quiero conseguir que esto funcione con keyup y no pulsación de tecla.

Agradecería cualquier idea. Gracias.

Respuesta

46

No creo que pueda preventDefault() (que es lo que se necesita usar para detener el navegador de la realización de la acción predeterminada para una llave) en el caso keyup - se disparó después de el evento predeterminado tiene Ya ocurrió Vea this page para más.

Si puede, considere usar el keydown en su lugar.

En cuanto a detener el envío del formulario, puede enlazar al submit event y return false; cuando el envío no fue activado por el botón de envío (ver jQuery: how to get which button was clicked upon form submission? para saber cómo determinar esto).

Por otro lado, también podría unirse a keypress para la forma y cuando Introduzca se pulsa cancelar la presentación de la misma manera (código no probado):

$('form').keypress(function(e){ 
    if(e.which === 13){ 
     return false; 
    } 
}); 
+0

lo sé, pero yo tenía la esperanza de que había otra manera de prevenir el comportamiento por defecto de la función keyup. ¡Pero gracias! –

+0

@krysis Lo siento, no parece que haya mucho que puedas hacer con 'keyup' –

+0

¡Gracias, de todos modos! :) Tal vez logré que 'keydown' funcione para lo que estoy tratando de hacer. . –

0

lugar de descanso que podría tratar de retorno falsa o hacer que llamar a una función y el uso de http://api.jquery.com/event.preventDefault/

Por ejemplo: case 40: function(e) {e.preventDefault;}

Además, $('form').submit(function() {return false}); dejaría de presentaciones en total, pero no estoy seguro de que sea eso lo que buscas?

+0

Ya he probado e.preventDefault, pero no funciona por alguna razón. Y no tengo idea de por qué. Solo funciona cuando uso el uso de teclas/presionar teclas. –

+2

@krysis Ninguna de las respuestas en su forma actual (haciendo uso de 'keyup') funcionará porque' keyup' se activará * después de * la acción predeterminada ya está hecha por lo que no puede 'prevenirDefault()'. Ver mi respuesta corregida. –

+1

también, 'preventDefault' es una función, por lo que debe ser' e.preventDefault() ' –

0

Para evitar que se envíe el formulario cuando el usuario presione enter, debe vincular la función de envío de su formulario y devolver false si el desencadenador de evento fue el botón enter que se está presionando.

para el Arriba/Abajo pulse el botón, use e.preventDefault();

0

El método más fiable es una combinación de e.preventDefault(), e.stopPropagation() y return false;

Esto es lo que podría ser:

var override_keys = [13, 38, 40]; 

$('input').keyup(function(e){ 
    var code = e.keyCode ? e.keyCode : e.which; 

    if ($.inArray(code, override_keys)) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
    } 
}); 

Además, para evitar que la forma de ser presentado junto con la tecla enter debe comprobar submit del formulario evento:

$('#form').submit(function(e){ 
    var code = e.keyCode ? e.keyCode : e.which; 

    if ($.inArray(code, override_keys)) { 
    return false; 
    } 
}); 
+1

, el evento keyup no se puede evitar, échele un vistazo [aquí] (http://www.quirksmode.org/dom/events /keys.html) – joiggama

0

Parece que en realidad PUEDE detener el valor predeterminado para 'ENTER' mientras usa keyup(); ... jQuery API escribe sobre ellos mismos aquí: http://api.jquery.com/keyup/

He aquí cómo usted tiene que hacer:

$('textarea').keyup(function(e) { 
    // your code here 
}).keydown(function(e){ 
    // your e.which for ENTER. 
}); 
+0

Sin embargo, eso no está usando 'keyup', y ese es el punto. Tiene razón, ese código funcionará, pero solo porque está usando 'keydown' para suprimir la tecla enter. Como otras respuestas han indicado aquí, no puedes hacer esto usando 'keyup' solo, ya que el evento ya habrá sido disparado antes y no puedes retroceder en el tiempo y suprimirlo. –

+0

@MarkEmbling Tienes toda la razón en esto. – skolind

Cuestiones relacionadas