ejemplo - El evento de cambio de javascript en el elemento de entrada se dispara solo al perder el foco

onblur html5

Question

Tengo un elemento de entrada y quiero seguir comprobando la longitud de los contenidos y siempre que la longitud sea igual a un tamaño particular, quiero habilitar el botón de enviar, pero estoy enfrentando un problema con el evento onchange de javascript como evento se dispara solo cuando el elemento de entrada sale del alcance y no cuando el contenido cambia.

<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 mediante el uso de la función onkeyup, pero eso no se dispara cuando seleccionamos contenido del autocompletador del navegador.

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

Answer 1

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í está, utilicé 5-6 cuadros de entrada con la clase ''filterBox'', hago que el método filterBy se ejecute solo si el valor de datos es diferente de su propio valor.

Answer 2

Como una extensión de 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());
}
});

Answer 3

Puedes usar onkeyup

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

Answer 4

Tendría que usar una combinación de onkeyup y onclick (o onmouseup ) si desea onmouseup todas las posibilidades.

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

Answer 5

Hazlo de la manera jQuery:

<input type="text" id="name" name="name"/>
$(''#name'').keyup(function() {
alert(''Content length has changed to: ''+$(this).val().length);
});

Answer 6

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

Esto captará el change , las pulsaciones de teclas, paste , input , 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 Level 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 originarse a partir de una variedad de fuentes, por ejemplo, caracteres resultantes de presionar o soltar una tecla en un dispositivo de teclado, del procesamiento de un editor de métodos de entrada, o resultante de un comando de voz. Cuando 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 generarse.

input : un tipo de evento HTML5 .

Disparado 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.