El evento de cambio de Javascript en el elemento de entrada se activa solo al perder el enfoque

Tengo un elemento de entrada y quiero seguir verificando la longitud de los contenidos y siempre que la longitud sea igual a un tamaño particular, quiero habilitar el botón de envío, pero estoy enfrentando un problema con el evento onchange de Javascript como evento se activa 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 activa al cambiar el contenido del nombre, sino que solo se activa cuando el nombre se desenfoca.

¿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 al usar la función onkeyup, pero eso no se activa cuando seleccionamos algún contenido del autocompletado del navegador.

Quiero algo que pueda funcionar cuando el contenido del campo cambie, ya sea con el teclado o con el mouse ... ¿alguna idea?

(function () {
    var oldVal;

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

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

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

Referencias:

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

Un agente de usuario debe enviar este evento cuando se hayan ingresado uno o más caracteres. Estos caracteres pueden tener su origen en una variedad de fuentes, por ejemplo, caracteres resultantes de una tecla que se presiona o suelta en un dispositivo de teclado, del procesamiento de un editor de métodos de entrada o de un comando de voz. Cuando una operación de "pegar" genera una secuencia simple de caracteres, es decir, un pasaje de texto sin ninguna estructura o información de estilo, también se debe generar este tipo de evento.

input- un tipo de evento HTML5 .

Se dispara a los controles cuando el usuario cambia el valor

Firefox, Chrome, IE9 y otros navegadores modernos lo admiten.

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

Como extensión a la respuesta de katspaugh, aquí hay una forma 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());
        }
    });

Me tomó 30 minutos encontrarlo, pero está funcionando en junio de 2019.

<input type="text" id="myInput" oninput="myFunction()">

y si desea agregar un detector de eventos mediante programación en js

inputElement.addEventListener("input", event => {})

Hazlo de la manera jQuery:

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


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

Puedes usar onkeyup

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

Debería usar una combinación de onkeyupy onclick(o onmouseup) si desea aprovechar todas las posibilidades.

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

Aquí hay otra solución que desarrollo para el mismo problema. Sin embargo, utilizo muchos cuadros de entrada, por lo que mantengo el valor antiguo como un atributo definido por el usuario de los elementos en sí: "valor de datos". Usar jQuery es muy 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í está, utilicé 5-6 cajas de entrada con clase 'filterBox', hago que el método filterBy se ejecute solo si el valor de datos es diferente a su propio valor.