¿Detecta el "valor" del campo de texto de entrada después de un evento de selección en el campo de texto?

Question

Así que 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 debidos a la tecla presionada.

Por ejemplo para este cuadro de entrada:

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

El valor por defecto es "vaca". Cuando presiona la tecla "s" en la entrada, obtiene una alerta ("vaca") en lugar de una alerta ("vacas"). ¿Cómo puedo alertarlo ("vacas") sin utilizar onkeyup? No quiero usar onkeyup porque se siente menos receptivo.

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 tiene el texto en la entrada resaltado y luego presiona una tecla.

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

Gracias

Answer 1

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

Puede evitar esta limitación dando al navegador la oportunidad de actualizar los contenidos del campo antes de obtener su valor; la forma más simple es usar un tiempo de espera mínimo antes de verificar el valor.

Un ejemplo es mínima:

<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 ocurrir después de la pulsación de tecla y manipuladores keydown han dejado que el control cambia su valor. Si su monitor está refrescándose a 60 fps, entonces tiene 16ms de margen de maniobra antes de que tenga un retraso de 2 cuadros.

---

Un ejemplo más completo (que no se basa en named access on the Window object 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 se ejecuta el código anterior, pruebe algunas de las siguientes:

• Coloque el cursor al inicio y escriba
• pegar algún contenido en el medio del cuadro de texto
• Seleccionar un montón de texto y escriba para reemplazarlo

Answer 2

keyup/abajo eventos se manejan de manera diferente en distintos navegadores. La solución más simple es usar una biblioteca como mootools, que hará que se comporten de la misma manera, lidien con la propagación y el burbujeo, y le proporcionen un "esto" estándar en la devolución de llamada.

Answer 3

Que yo sepa, no se puede hacer eso con un control de entrada estándar a menos que sacas tu propio.

Answer 4

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

Answer 5

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

Answer 6

Por favor, intente utilizar oninput evento. A diferencia de onkeydown, onkeypress eventos este evento actualiza la propiedad del valor del control.

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

Answer 7

Jquery es la forma óptima de hacerlo. Consulte la siguiente información:

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

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