[SOLUCIONADO] Alguna técnica delay eficiente para un input?

[dfmex]

Hola que tal!!!

Tengo un problema al tratar de hacer funcionar un evento a raíz de un input

Sucede que tengo un campo de texto:

Código:

<input type="password" name="AutoUser" id="AutoUser" size="60" onKeyUp="ActivarTiempo();" autocomplete="off" placeholder="Escribir" />

Como verán, al escribir en el campo se activa la funcion Java "ActivarTiempo();" la cual es la siguiente:

Código:

function ActivarTiempo(){
		setTimeout("Desactivado();",1500);
	}

Esto hace que se active la función "Desactivado()" pasando 1.5 segundos... y la función desactivado es:

Código:

function Desactivado(){
			document.getElementById('AutoUser').disabled = true;
		}

Y en resumen cuando escribes una tecla se desactiva el campo donde estas escribiendo tras 1.5 segundo, pero el problema es este:

Yo lo que quiero es que si quiero escribir: "HOLA ESTE ES UN TEXTO UN POCO LARGO PARA QUE LO ESCRIBA EN MENOS DE 1.5 SEGUNDOS" debido a que no lo escribo TAN RÁPIDO el campo de texto se desactiva tras 1.5 Segundos de presionar la primer tecla, y yo lo que quiero es que se desactive a los 1.5 segundos tras escribir la última tecla, pero por ejemplo mientras estés escribiendo que no se desactive, algo así como "contar inactividad a partir de la última tecla escrita"

De tal forma que si escribo "HOLA" y no escribo más después de 1.5 segundos pase el evento, de otro modo si escribo "HOLA ESTE ES UN TEXTO UN POCO LARGO PARA QUE LO ESCRIBA EN MENOS DE 1.5 SEGUNDOS" se desactive al pasar 1.5 segundos tras escribir la S que es la última letra del texto...


¿Alguien tendría alguna idea de cómo podría resolver esto?

[Alexis88]

Cada vez que se produzca el evento keyup, limpias el intervalo de tiempo (los 1.5 segundos) y lo vuelve a activas, de este modo, cada vez que se pulse una tecla, se desactivará y activará el intervalo de tiempo.

Código Javascript:

var input = document.getElementsByTagName("input")[0],
    intervalo,
    disabled = function(){
        return setTimeout(function(){
            input.disabled = true; 
        }, 1500);
    };
 
input.addEventListener("keyup", function(){
    clearTimeout(intervalo);
    intervalo = disabled();
}, false);
 

Saludos

[dfmex]

Iniciado por Alexis88

Muchas gracias por tu respuesta, estaba analizando el Script que me enviaste y ejecuta la acción que yo deseo, sin embargo traté de modificarlo a mis necesidades y algo falla porque no le entiendo bien...


Lo que me interesa es que el evento se active únicamente cuando escribo algo en el input campo de texto con ID "AutoUser", y que únicamente funcione para dicho campo...

Quisiera que se active dicha función ya que dentro de la función he programado cosas que deben ocurrir cuando pasan los 1.5 segundos...

Hice la modificación así pero no entiendo por qué no funcionó:

http://jsfiddle.net/jTA8s/2/

¿Me podrías apoyar por favor?

[Alexis88]

Cuando tomas a un elemento por su Id, no es necesario especificar que se trata del primero, como en el ejemplo que mostré en donde tomo a un elemento por su nombre de etiqueta, en ese caso sí necesito especificar que se trata del primero mediante esto: [0]. En tu caso, no es necesario. Por otro lado, el código de la función Tiempo(), debe de estar afuera, es decir, no necesitas colocarlo dentro de una función pues en ese caso, tendría que invocar primero a dicha función para que se ejecute el código interno.

Mira cómo quedó: http://jsfiddle.net/nQTvK/

Saludos

[dfmex]

Iniciado por Alexis88

Cuando tomas a un elemento por su Id, no es necesario especificar que se trata del primero, como en el ejemplo que mostré en donde tomo a un elemento por su nombre de etiqueta, en ese caso sí necesito especificar que se trata del primero mediante esto: [0]. En tu caso, no es necesario. Por otro lado, el código de la función Tiempo(), debe de estar afuera, es decir, no necesitas colocarlo dentro de una función pues en ese caso, tendría que invocar primero a dicha función para que se ejecute el código interno.

Mira cómo quedó: http://jsfiddle.net/nQTvK/

Saludos

Muy interesante Alexis, gracias porque he aprendido algo nuevo.

Solo me queda una duda:

El Script en base al evento KEYUP se activa, entonces, ¿esto significa que de alguna forma detecta qué tecla se ha pulsado, por ejemplo Enter (key 13)?

Ya que con el nuevo código dejó de funcionar mi detector de código anterior y mi objetivo es que (además del que ya está y te quedó muy bien) cuando presionas ENTER (en ese justo instante) automáticamente se desactive el campo input, pero además de ejecutar Desactivar(); ejecute HuboEnter();

Actualmente así detectaba si hubo un Enter, pero ya no funciona en conjunto con el código de desactivar por tiempo:

Código:

document.getElementById('AutoUser').onkeypress = function(e){
    if (!e) e = window.event;
    if (e.keyCode == '13'){
      alert(this.value);
      return false;
    }
  }

[Alexis88]

Sí puedes detectar la tecla que se pulse. En esta actualización, deshabilito la caja de texto cuando se pulsa la tecla ENTER: http://jsfiddle.net/6KeCw/

[dfmex]

Iniciado por Alexis88

Sí puedes detectar la tecla que se pulse. En esta actualización, deshabilito la caja de texto cuando se pulsa la tecla ENTER: http://jsfiddle.net/6KeCw/

Alexis Muchas Gracias por tus amables respuestas;

He estado probando el código y fíjate que no encuentro como evitar que se ejecute la acción que ocurre al pasar 1.5 segundos si se ha ejecutado la de ENTER, modifiqué un poco el código y me quedó así:

Código Javascript:

<script type='text/javascript'>//<![CDATA[ 
        window.onload=function(){
            var input = document.getElementById("AutoUser"),
                intervalo,
                disabled = function(){
                    return setTimeout(function(){
                       ExpirarCDB();
                    }, 1500);
                };
                
            input.addEventListener("keyup", function(e){
                if (e.keyCode == 13){
                    EvaluarCDB(input.value);
                    return;
                }
                clearTimeout(intervalo);
                intervalo = disabled();
            }, false);    
        }//]]>  
 
</script>
 

Lo que ocurre es que cuando se ejecuta el EvaluarCDB (debido al enter) ya no deseo que se ejecute el ExpirarCDB();

Es decir, si no existe un enter y demoré más de 1.5 segundos pues se ejecuta ExpirarCDB() . Hasta aquí es perfecto.

Si al escribir doy ENTER se ejecute EvaluarCDB() y hasta aquí también perfecto, sin embargo si entra en acción EvaluarCDB() deseo que ya no exista el evento de que pasen 1.5 segundos, es decir, que detenga ExpirarCDB() porque hubo enter...

De lo demás todo bien, va quedando de maravilla, ¿qué podría hacer para lograr este cambio final?

[Alexis88]

Pues solo sería cuestión de utilizar una variable comodín que cambie de valor cuando pulses la tecla ENTER, luego, evalúas el valor de este comodín y de acuerdo a esto, deshabilitas a la función ExpirarCDB().



Saludos

[dfmex]

Iniciado por Alexis88

Pues solo sería cuestión de utilizar una variable comodín que cambie de valor cuando pulses la tecla ENTER, luego, evalúas el valor de este comodín y de acuerdo a esto, deshabilitas a la función ExpirarCDB().



Saludos

Muchas gracias por tu ayuda Alexis, paciencia y explicaciones, me ha ayudado bastante, he logrado mi objetivo.