¿Cómo obtener el texto de un cuadro de texto de entrada durante onKeyPress?

Estoy tratando de obtener el texto en un cuadro de texto mientras el usuario escribe en él ( jsfiddle playground ):

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

El código se ejecuta sin errores, excepto que el valor del input textcuadro, durante onKeyPresses siempre el valor antes del cambio:

Pregunta : ¿Cómo obtengo el texto de un cuadro de texto durante onKeyPress?

Chatter adicional

Hay tres eventos relacionados con "el usuario está escribiendo" en el DOM HTML:

• onKeyDown
• onKeyPress
• onKeyUp

En Windows , el orden de los WM_Keymensajes se vuelve importante cuando el usuario mantiene presionada una tecla y la tecla comienza a repetirse:

• WM_KEYDOWN('a')- el usuario ha pulsado la Atecla
• WM_CHAR('a')- ase ha recibido un personaje del usuario
• WM_CHAR('a')- ase ha recibido un personaje del usuario
• WM_CHAR('a')- ase ha recibido un personaje del usuario
• WM_CHAR('a')- ase ha recibido un personaje del usuario
• WM_CHAR('a')- ase ha recibido un personaje del usuario
• WM_KEYUP('a')- el usuario ha soltado la Allave

Dará como resultado la aparición de cinco caracteres en un control de texto: aaaaa

Lo importante es que tú respondas al WM_CHARmensaje, el que se repite. De lo contrario, perderá eventos cuando se presione una tecla.

En HTML, las cosas son ligeramente diferentes:

• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyUp

Html ofrece una KeyDowny KeyPresscada tecla repetida. Y el KeyUpevento solo se genera cuando el usuario suelta la tecla.

Para llevar

• Yo puedo responder a onKeyDowno onKeyPress, pero ambos todavía se levantan antes de que el input.valuese ha actualizado
• No puedo responder onKeyUp, porque no sucede cuando cambia el texto en el cuadro de texto.

Pregunta: ¿Cómo obtengo el texto de un cuadro de texto durante onKeyPress?

Lectura adicional

• Obtener un valor de formulario con jQuery
• Obtenga el valor en un cuadro de texto de entrada

Manejar el inputevento es una solución consistente: es compatible con elementos textareay inputen todos los navegadores contemporáneos y se activa exactamente cuando lo necesita:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

Sin embargo, reescribiría esto un poco:

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>

Mantenlo simple. Utilice ambos onKeyPress()y onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

Esto se encarga de obtener el valor de cadena más actualizado (después de subir la tecla) y también se actualiza si el usuario mantiene presionada una tecla.

jsfiddle: http://jsfiddle.net/VDd6C/8/

el valor del cuadro de texto de entrada, durante onKeyPress es siempre el valor antes del cambio

Esto es a propósito: esto permite que el oyente del evento cancele la pulsación de tecla.

Si los detectores de eventos cancelan el evento , el valor no se actualiza. Si el evento no se cancela, el valor se actualiza, pero después de llamar al detector de eventos .

Para obtener el valor después de que se haya actualizado el valor del campo, programe una función para que se ejecute en el siguiente ciclo de eventos. La forma habitual de hacer esto es llamar setTimeoutcon un tiempo de espera de 0:

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

Pruebe aquí: http://jsfiddle.net/Q57gY/2/

Editar : algunos navegadores (por ejemplo, Chrome) no activan eventos de pulsación de teclas para retroceso; se cambió la pulsación de tecla a tecla en el código.

manténgalo compacto.
Cada vez que presiona una tecla, edValueKeyPress()se llama a la función .
También ha declarado e inicializado algunas variables en esa función, lo que ralentiza el proceso y también requiere más CPU y memoria.
Simplemente puede usar este código, derivado de una simple sustitución.

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

Eso es todo lo que quieres y es más rápido.

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Ninguna de las respuestas hasta ahora ofrece una solución completa. Hay bastantes problemas que abordar:

1. No todas las pulsaciones de teclas son pasados a keydowny keypressmanipuladores (por ejemplo, teclas retroceder y borrar son suprimidas por algunos navegadores).
2. El manejo keydownno es una buena idea. ¡Hay situaciones en las que una pulsación de tecla NO da como resultado una pulsación de tecla!
3. setTimeout() Las soluciones de estilo se retrasan en los navegadores web Google Chrome / Blink hasta que el usuario deja de escribir.
4. Los eventos táctiles y del mouse se pueden usar para realizar acciones como cortar, copiar y pegar. Esos eventos no activarán eventos de teclado.
5. Es posible que el navegador, según el método de entrada, no envíe una notificación de que el elemento ha cambiado hasta que el usuario se aleje del campo.

Una solución más correcta manejará los keypress, keyup, input, y changeeventos.

Ejemplo:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

Violín:

http://jsfiddle.net/VDd6C/2175/

El manejo de los cuatro eventos detecta todos los casos extremos. Al trabajar con la entrada de un usuario, se deben considerar todos los tipos de métodos de entrada y se debe verificar la funcionalidad entre navegadores y dispositivos. El código anterior se ha probado en Firefox, Edge y Chrome en el escritorio, así como en los dispositivos móviles que poseo.

Normalmente concateno el valor del campo (es decir, antes de que se actualice) con la clave asociada con el evento clave. Lo siguiente usa JS reciente, por lo que sería necesario ajustar el soporte en IE más antiguos.

Ejemplo JS reciente

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

Ejemplo de soporte para IE más antiguos

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[EDITAR: este enfoque, de forma predeterminada, deshabilita las pulsaciones de teclas para cosas como el espacio posterior, CTRL + A. El código anterior se adapta al primero, pero necesitaría más ajustes para permitir el segundo y algunas otras eventualidades. Vea el comentario de Ian Boyd a continuación.]

fácil...

En su controlador de eventos keyPress, escriba

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

Entonces, hay ventajas y desventajas en cada evento. Los eventos onkeypressy onkeydownno recuperan el valor más reciente y onkeypressno se activa para caracteres no imprimibles en algunos navegadores. El onkeyupevento no detecta cuándo se mantiene presionada una tecla para varios caracteres.

Esto es un poco hacky, pero haciendo algo como

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

parece manejar lo mejor de todos los mundos.

Al usar event.key podemos obtener valores antes de ingresarlos en el cuadro de texto de entrada HTML. Aquí está el código.

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}

<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />

Intente concatenar el evento charCode con el valor que obtenga. Aquí hay una muestra de mi código:

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

js:

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

El valor en abobtendrá el último valor en el campo de entrada.

Hay una forma mejor de hacer esto. Utilice el método concat. Ejemplo

declarar una variable global. esto funciona bien en angular 10, simplemente páselo a Vanilla JavaScript. Ejemplo:

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

CÓDIGO

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}