[javascript] Come ottenere il testo di una casella di testo di input durante onKeyPress?


Answers

il valore della casella di testo di input, durante onKeyPress è sempre il valore prima della modifica

Questo è di proposito: questo permette al listener di eventi di cancellare la pressione del tasto.

Se i listener di eventi annullano l'evento , il valore non viene aggiornato. Se l'evento non viene annullato, il valore viene aggiornato, ma dopo che il listener di eventi è stato chiamato .

Per ottenere il valore dopo che il valore del campo è stato aggiornato, pianificare una funzione da eseguire sul ciclo di eventi successivo. Il solito modo per farlo è chiamare setTimeout con un timeout di 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);
});

Prova qui: http://jsfiddle.net/Q57gY/2/

Modifica : alcuni browser (ad esempio Chrome) non attivano eventi di pressione tasti per il backspace; cambiato keypress per digitare il codice.

Question

Sto cercando di ottenere il testo in una casella di testo mentre l'utente digita in esso ( jsfiddle playground ):

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

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

</html>

Il codice viene eseguito senza errori, tranne che il valore della casella di input text , durante onKeyPress è sempre il valore prima della modifica:

Domanda : Come ottengo il testo di una casella di testo durante onKeyPress ?

Bonus Chatter

Esistono tre eventi correlati a "l'utente sta digitando" nel DOM HTML:

  • onKeyDown
  • onKeyPress
  • onKeyUp

In Windows , l'ordine dei messaggi WM_Key diventa importante quando l'utente tiene premuto un tasto e la chiave inizia a ripetere:

  • WM_KEYDOWN('a') - l'utente ha premuto il tasto A
  • WM_CHAR('a') - un carattere è stato ricevuto dall'utente
  • WM_CHAR('a') - un carattere è stato ricevuto dall'utente
  • WM_CHAR('a') - un carattere è stato ricevuto dall'utente
  • WM_CHAR('a') - un carattere è stato ricevuto dall'utente
  • WM_CHAR('a') - un carattere è stato ricevuto dall'utente
  • WM_KEYUP('a') - l'utente ha rilasciato la chiave A

Comporterà la visualizzazione di cinque caratteri in un controllo testo: aaaaa

Il punto importante è che tu rispondi al messaggio WM_CHAR , quello che si ripete. Altrimenti perdi eventi quando viene premuto un tasto.

In HTML le cose sono leggermente diverse:

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

Html consegna KeyDown e KeyPress ogni ripetizione di tasti. E l'evento KeyUp viene sollevato solo quando l'utente rilascia la chiave.

Portare via

  • Posso rispondere a onKeyDown o onKeyDown , ma entrambi sono ancora sollevati prima che il valore input.value sia stato aggiornato
  • Non posso rispondere a onKeyUp , perché non succede quando il testo nella casella di testo cambia.

Domanda: Come ottengo il testo di una casella di testo durante onKeyPress ?

Lettura bonus




facile...

Nel tuo gestore di eventi keyPress, scrivi

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
}



tenerlo compatto.
Ogni volta che si preme un tasto, viene chiamata la funzione edValueKeyPress() .
Hai anche dichiarato e inizializzato alcune variabili in quella funzione, che rallentano il processo e richiedono più CPU e memoria.
Puoi semplicemente usare questo codice, derivato dalla semplice sostituzione.

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

}

È tutto ciò che vuoi, è più veloce!




Prova a concatenare l'evento charCode sul valore che ottieni. ecco un esempio del mio codice.

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

Il valore in ab otterrà l'ultimo valore nel campo di input.




Usando event.key possiamo ottenere valori prima di entrare nella casella di testo HTML Input. Ecco il codice.

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()" />






Related