One-( keypress-)event-delay between javascript input and output

Question

The following snippet reproduces the input text in the webpage using simple javaScript and jQuery.

I am wondering, though, how come there is a one character (or more precisely : one keystroke) latency between the input and the output

eg :

I type 'abcde'
the output is 'abcd'
however if I press the Insert key, the ultimate 'e' prints.

My code :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="text" name="enteredText" id="myTextInput" />

    <p id="myTextOutput">
    blabla 
    </p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
  $("#myTextInput").keypress(function( ){
    var theText = $("#myTextInput").val();
    $("#myTextOutput").html(theText); 
  });

$( "html" ).click(function( event ) {
 
    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value); 
 
});

    </script>
  </body>
</html>

Any idea ? Thanks

Ashkan Mobayen Khiabani · Accepted Answer · 2016-07-07 19:46:40Z

2

If you want to get rid of tat latency. use keyup or keydown instead of keypress:

$("#myTextInput").keyup(function( ){
    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value); 
  });

Here is the DEMO

answered Jul 7, 2016 at 19:46

Ashkan Mobayen Khiabani

34.4k35 gold badges111 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TimoStaudinger Over a year ago

keydown has the same issue as keypress, at least in Chrome: jsfiddle.net/mmojdaqe

Ashkan Mobayen Khiabani Over a year ago

the reason I used keyup in my samples is that.

TimoStaudinger Over a year ago

I know, just pointing it out since you suggest using keydown in the second sentence. :-)

TimoStaudinger · Accepted Answer · 2016-07-07 19:51:19Z

The most likely reason is that the keypress event handler is executed before the content of the input field is updated. When you read the content, you still read the old content, not the updated one.

From jQuery's keypress docs:

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Using keyup instead fixes the issue:

  $("#myTextInput").keyup(function() {
    var theText = $("#myTextInput").val();
    $("#myTextOutput").html(theText);
  });

  $("html").click(function(event) {

    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value);

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="enteredText" id="myTextInput" />

<p id="myTextOutput">
  blabla
</p>

Andrew Miner · Accepted Answer · 2016-07-07 19:46:18Z

0

You're grabbing the value before you've allowed the event to propagate up to where the text field has been updated. You can add an infinitesimal delay to get the full value:

$("#myTextInput").keypress(function( ){
    setTimeout(function() {
       var value = $("#myTextInput").val();
      $("#myTextOutput").html(value);
    }, 0);
  });

answered Jul 7, 2016 at 19:46

Andrew Miner

6,2232 gold badges25 silver badges26 bronze badges

2 Comments

marsupilam Over a year ago

Yeah great, this seems to be the fastest responding fix amongst the following solutions : keyup/keydown/Timeout

James McDonnell Over a year ago

You should just use the keyup event instead of the keypress with a timeout. That's just silly.

Collectives™ on Stack Overflow

One-( keypress-)event-delay between javascript input and output

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related