javascript cambiar evento en el elemento de entrada se activa al perder solo el foco

Question

Tengo un elemento de entrada y quiero seguir comprobando la longitud del contenido y siempre que la longitud sea igual a un tamaño particular, quiero habilitar el botón Enviar, pero Me enfrenta un problema con el evento onchange de JavaScript, ya que el evento se dispara solo cuando el elemento de entrada sale del alcance y no cuando cambia el contenido.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange no se dispara en el cambio de contenido de nombre, pero sólo se activa cuando el nombre va fuera de foco.

¿Hay algo que pueda hacer para que este evento funcione en el cambio de contenido? o algún otro evento que pueda usar para esto? Encontré una solución mediante el uso de la función onkeyup, pero eso no se dispara cuando seleccionamos contenido del autocompletador del navegador.

Quiero algo que puede funcionar cuando el contenido del campo cambia ya sea por el teclado o por el mouse ... alguna idea?

Answer 1

(function() { 
    var oldVal; 

    $('#name').on('change textInput input', function() { 
     var val = this.value; 
     if (val !== oldVal) { 
      oldVal = val; 
      checkLength(val); 
     } 
    }); 
}()); 

Esto cogerá change, las pulsaciones de teclado, paste, textInput, input (cuando esté disponible). Y no disparar más de lo necesario.

http://jsfiddle.net/katspaugh/xqeDj/

---

Referencias:

textInput - un W3C DOM Nivel 3 Tipo de evento. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Un agente de usuario debe distribuir este evento cuando se han introducido uno o más caracteres . Estos caracteres pueden originarse a partir de una variedad de fuentes , por ejemplo, caracteres resultantes de una tecla presionada o liberada en un dispositivo de teclado, del procesamiento de un método de entrada editor, o como resultado de un comando de voz. Donde una operación "pegar" genera una secuencia simple de caracteres, es decir, un pasaje de texto sin ninguna estructura o información de estilo, este tipo de evento también debe ser generado.

input - HTML5 tipo de evento.

disparó a los controles cuando el usuario cambia el valor

Firefox, Chrome, IE9 y otros navegadores actuales son compatibles con ella.

Este evento ocurre inmediatamente después de la modificación, a diferencia del evento onchange, que ocurre cuando el elemento pierde el foco.

Answer 2

Do it the jQuery way:

<input type="text" id="name" name="name"/> 


$('#name').keyup(function() { 
    alert('Content length has changed to: '+$(this).val().length); 
}); 

Answer 3

Usted puede utilizar onkeyup

<input id="name" onkeyup="checkLength(this.value)" /> 

Answer 4

Usted tendría que utilizar una combinación de onkeyup y onclick (o onmouseup), si se desea capturar todas las posibilidades.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" /> 

Answer 5

Aquí hay otra solución que desarrollo para el mismo problema. Sin embargo, utilizo muchos cuadros de entrada para mantener el valor anterior como un atributo definido por el usuario de los elementos en sí: "data-value". Usar jQuery es tan fácil de administrar.

 $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) { 
      var self = e.data.self; 

      if (e.keyCode == 13) { 
       e.preventDefault(); 
       $(this).attr('data-value', $(this).val()); 
       self.filterBy(this, true) 
      } 
      else if (e.keyCode == 27) { 
       $(this).val(''); 
       $(this).attr('data-value', ''); 
       self.filterBy(this, true) 
      } 
      else { 
       if ($(this).attr('data-value') != $(this).val()) { 
        $(this).attr('data-value', $(this).val()); 
        self.filterBy(this); 
       } 
      } 
     }); 

aquí es, que se utiliza 5-6 cuadros de entrada tienen clase 'FilterBox', hago método filterBy plazo si los datos de valor es diferente de su propio valor.

Answer 6

Como extensión a la respuesta de katspaugh, aquí hay una manera de hacerlo para múltiples elementos usando una clase css.

$('.myclass').each(function(){ 
     $(this).attr('oldval',$(this).val()); 
    }); 

    $('.myclass').on('change keypress paste focus textInput input',function(){ 
     var val = $(this).val(); 
     if(val != $(this).attr('oldval')){ 
      $(this).attr('oldval',val); 
      checkLength($(this).val()); 
     } 
    });