Jquery: cómo desencadenar un evento cuando el usuario borra un cuadro de texto

Question

tengo una función que actualmente funciona en el evento .keypress cuando el usuario acerta algo en el cuadro de texto hace algún código, pero quiero que se desencadene el mismo evento también cuando el usuario desactive el cuadro de texto .Cambiar no ayuda, ya que se dispara cuando el usuario cambia el foco a otra cosa

Gracias

Answer 1

el evento keyup detectará si el usuario ha desactivado la casilla, así (es decir, la tecla de retroceso plantea el evento pero el retroceso no plantea el evento keypress en IE)

$("#inputname").keyup(function() { 

    if (!this.value) { 
     alert('The box is empty'); 
    } 

}); 

jsFiddle

Como dice Josh, esto es despedido por cada código de caracteres que se presiona en la entrada. Esto solo muestra que necesita usar el evento de tecla para activar el retroceso, en lugar del evento keypress que está utilizando actualmente.

Answer 2

Dentro de su función .keypress o .keyup, verifique si el valor de la entrada está vacío. Por ejemplo:

$("#some-input").keyup(function(){ 
if($(this).val() == "") { 
    // input is cleared 
} 
}); 

<input type="text" id="some-input" /> 

Answer 3

La solución de Jonathon Bolster no cubre todos los casos. Lo adapté para cubrir también las modificaciones cortando y pegando:

$("#inputname").on('change keyup copy paste cut', function() { 
    //!this.value ... 
}); 

ver http://jsfiddle.net/gonfidentschal/XxLq2/

Desafortunadamente no es posible coger los casos en que el valor del campo se establece usando javascript. Si configura el valor usted mismo no es un problema porque sabe cuándo lo hace ... pero cuando está utilizando una biblioteca como AngularJS que actualiza la vista cuando el estado cambia, puede ser un poco más laborioso. O tiene que usar un temporizador para verificar el valor.

Consulte también la respuesta para Detecting input change in jQuery? que sugiere el evento de 'entrada' que entienden los navegadores modernos. Por lo que sólo:

$("#inputname").on('input', function() { 
    //!this.value ... 
}); 

Answer 4

Otra forma en que lo hace de una manera concisa está a la escucha para el evento de "entrada" en la caja de texto/de tipo de entrada: campos de texto

/** 
* Listens on textarea input. 
* Considers: undo, cut, paste, backspc, keyboard input, etc 
*/ 
$("#myContainer").on("input", "textarea", function() { 
    if (!this.value) { 

    } 
});