forms - tutorial - ¿Detectando el "valor" del campo de texto de entrada después de un evento de reducción de teclado en el campo de texto?

plantillas contact form 7

Question

Por lo tanto, mi sitio tiene un cuadro de entrada, que tiene un evento onkeydown que simplemente alerta el valor del cuadro de entrada.

Desafortunadamente, el valor de la entrada no incluye los cambios debido a la tecla que se presiona.

Por ejemplo para este cuadro de entrada:

<input onkeydown="alert(this.value)" type="text" value="cow" />

El valor predeterminado es "vaca". Cuando presiona la tecla "s" en la entrada, aparece una alerta ("vaca") en lugar de una alerta ("vacas"). ¿Cómo puedo hacer que esté alerta ("vacas") sin usar onkeyup ? No quiero usar onkeyup porque se siente menos sensible.

Una solución parcial es detectar la tecla presionada y luego agregarla al valor de la entrada, pero esto no funciona en todos los casos, como si el texto en la entrada resaltado y luego presiona una tecla.

¿Alguien tiene una solución completa a este problema?

Gracias

Answer 1

Aquí tienes un ejemplo con una explicación: http://jsbin.com/awopus/4/edit

Answer 2

El controlador de eventos solo ve el contenido antes de que se aplique el cambio, ya que los eventos de input y de input dan la oportunidad de bloquear el evento antes de que llegue al campo.

Puede solucionar esta limitación al darle al navegador la oportunidad de actualizar el contenido del campo antes de tomar su valor. La forma más sencilla es usar un pequeño tiempo de espera antes de verificar el valor.

Un ejemplo mínimo es:

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

Esto establece un tiempo de espera de 1 ms que debe suceder después de que los controladores de pulsación de teclas y de reducción de teclas hayan dejado que el control cambie su valor. Si su monitor se está actualizando a 60 fps, entonces tiene 16 ms de espacio de maniobra antes de que se demore 2 cuadros.

Un ejemplo más completo (que no se basa en el acceso con nombre en el objeto de Windows se vería así:

var e = document.getElementById(''e'');
var out = document.getElementById(''out'');

e.addEventListener(''input'', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});

<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

Cuando ejecute el fragmento de código anterior, pruebe algunos de los siguientes:

• Ponga el cursor al inicio y escriba
• Pega algo de contenido en el centro del cuadro de texto
• Seleccione un montón de texto y escriba para reemplazarlo

Answer 3

Jquery es la forma óptima de hacer esto. Por favor haga referencia a lo siguiente a continuación:

let fieldText = $(''#id'');
let fieldVal = fieldText.val();

fieldText.on(''keydown'', function() {
   fieldVal.val();
});

Answer 4

Los eventos keyup / down se manejan de manera diferente en diferentes navegadores. La solución simple es utilizar una biblioteca como mootools, que hará que se comporten de la misma manera, lidiar con la propagación y el burbujeo, y le dará un estándar de "esto" en la devolución de llamada.

Answer 5

Por favor, trate de usar el evento oninput . A diferencia de onkeydown , onkeypress eventos, este evento actualiza la propiedad de valor del control.

<input id="txt1" value="cow" oninput="alert(this.value);" />

Answer 6

Que yo sepa, no puedes hacer eso con un control de entrada estándar a menos que lo hagas tú mismo.

Answer 7

Tenga en cuenta que en los navegadores más nuevos podrá usar el nuevo evento de "entrada" HTML5 ( https://developer.mozilla.org/en-US/docs/DOM/window.oninput ) para esto. La mayoría de los navegadores que no son IE han apoyado este evento durante mucho tiempo (consulte la tabla de compatibilidad en el enlace); para IE es la versión> / 9 solo desafortunadamente.