Como obter o texto de uma caixa de texto de entrada durante o onKeyPress?

Estou tentando obter o texto em uma caixa de texto conforme o usuário digita ( playground jsfiddle ):

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>

O código é executado sem erros, exceto que o valor da input textcaixa, durante onKeyPressé sempre o valor antes da alteração:

Pergunta : Como obtenho o texto de uma caixa de texto durante onKeyPress?

Bônus de bate-papo

Existem três eventos relacionados a "o usuário está digitando" no HTML DOM:

• onKeyDown
• onKeyPress
• onKeyUp

No Windows , a ordem das WM_Keymensagens torna-se importante quando o usuário mantém uma tecla pressionada e a tecla começa a se repetir:

• WM_KEYDOWN('a')- o usuário pressionou a Atecla
• WM_CHAR('a')- um acaractere foi recebido do usuário
• WM_CHAR('a')- um acaractere foi recebido do usuário
• WM_CHAR('a')- um acaractere foi recebido do usuário
• WM_CHAR('a')- um acaractere foi recebido do usuário
• WM_CHAR('a')- um acaractere foi recebido do usuário
• WM_KEYUP('a')- o usuário liberou a Achave

Resultará em cinco caracteres aparecendo em um controle de texto: aaaaa

O importante é que você responda à WM_CHARmensagem, aquela que se repete. Caso contrário, você perderá eventos quando uma tecla for pressionada.

Em HTML, as coisas são ligeiramente diferentes:

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

Html entrega um KeyDowne KeyPresscada repetição de tecla. E o KeyUpevento só é gerado quando o usuário libera a tecla.

Aprendizado

• I pode responder a onKeyDownou onKeyPress, mas ambos ainda são levantadas antes da input.valuefoi atualizado
• Não posso responder onKeyUp, porque isso não acontece quando o texto na caixa de texto muda.

Pergunta: Como obtenho o texto de uma caixa de texto durante onKeyPress?

Leitura de bônus

• Obtendo um valor de formulário com jQuery
• Obtenha o valor em uma caixa de texto de entrada

Manipular o inputevento é uma solução consistente: ele é compatível com elementos textareae inputem todos os navegadores contemporâneos e dispara exatamente quando você precisa:

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>

Eu reescreveria um pouco, embora:

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>

Mantenha simples. Use onKeyPress()e onKeyUp():

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

Isso se encarrega de obter o valor da string mais atualizado (após a ativação da chave) e também atualiza se o usuário mantiver uma tecla pressionada.

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

o valor da caixa de texto de entrada, durante onKeyPress é sempre o valor antes da mudança

Isso é proposital: permite que o ouvinte de evento cancele o pressionamento de tecla.

Se os ouvintes de eventos cancelarem o evento , o valor não será atualizado. Se o evento não for cancelado, o valor será atualizado, mas após a chamada do ouvinte de evento .

Para obter o valor após a atualização do valor do campo, agende uma função para ser executada no próximo loop de evento. A maneira usual de fazer isso é ligar setTimeoutcom um tempo limite 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);
});

Tente aqui: http://jsfiddle.net/Q57gY/2/

Editar : Alguns navegadores (por exemplo, Chrome) não acionam eventos de pressionamento de tecla para backspace; mudou keypress para keyup no código.

mantenha-o compacto.
Cada vez que você pressiona uma tecla, a função edValueKeyPress()é chamada.
Você também declarou e inicializou algumas variáveis ​​nessa função - o que torna o processo lento e requer mais CPU e memória também.
Você pode simplesmente usar este código - derivado de uma substituição simples.

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

Isso é tudo que você quer e é mais 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>

Nenhuma das respostas até agora oferece uma solução completa. Existem alguns problemas a serem resolvidos:

1. Nem todos os pressionamentos de tecla são passados ​​para keydowne keypressmanipuladores (por exemplo, backspace e delete keys são suprimidos por alguns navegadores).
2. O manuseio keydownnão é uma boa ideia. Existem situações em que uma tecla pressionada NÃO resulta em um pressionamento de tecla!
3. setTimeout() as soluções de estilo ficam atrasadas nos navegadores Google Chrome / Blink até que o usuário pare de digitar.
4. Os eventos de mouse e toque podem ser usados ​​para executar ações como cortar, copiar e colar. Esses eventos não irão acionar eventos de teclado.
5. O navegador, dependendo do método de entrada, pode não entregar a notificação de que o elemento foi alterado até que o usuário saia do campo.

Uma solução mais correta irá lidar com os keypress, keyup, input, e changeeventos.

Exemplo:

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

Violino:

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

O tratamento de todos os quatro eventos captura todos os casos extremos. Ao trabalhar com a entrada de um usuário, todos os tipos de métodos de entrada devem ser considerados e a funcionalidade entre navegadores e dispositivos deve ser verificada. O código acima foi testado no Firefox, Edge e Chrome no desktop, bem como nos dispositivos móveis que possuo.

Normalmente concateno o valor do campo (ou seja, antes de ser atualizado) com a chave associada ao evento de chave. O seguinte usa JS recente, portanto, precisaria de ajustes para suporte em IEs mais antigos.

Exemplo recente de JS

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);

Suporte para exemplo de IEs mais antigos

//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 - esta abordagem, por padrão, desabilita pressionamentos de tecla para coisas como back space, CTRL + A. O código acima acomoda o primeiro, mas precisaria de mais ajustes para permitir o último e algumas outras eventualidades. Veja o comentário de Ian Boyd abaixo.]

fácil...

Em seu manipulador de eventos keyPress, escreva

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
}

Portanto, existem vantagens e desvantagens em cada evento. Os eventos onkeypresse onkeydownnão recuperam o valor mais recente e onkeypressnão disparam para caracteres não imprimíveis em alguns navegadores. O onkeyupevento não detecta quando uma tecla é pressionada para vários caracteres.

Isso é um pouco hackeado, mas fazendo 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 lidar com o melhor de todos os mundos.

Usando event.key , podemos obter valores antes da entrada na caixa de texto HTML Input. Aqui está o 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()" />

Tente concatenar o evento charCode com o valor obtido. Aqui está um exemplo do meu 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;
}

O valor em abobterá o valor mais recente no campo de entrada.

Existe uma maneira melhor de fazer isso. Use o método concat. Exemplo

declara uma variável global. isso funciona bem no angular 10, basta passá-lo para o Vanilla JavaScript. Exemplo:

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);
}