onKeyPress Vs. onKeyUp and onKeyDown

Updated Answer:

KeyDown

• Fires multiple times when you hold keys down.
• Fires meta key.

KeyPress

• Fires multiple times when you hold keys down.
• Does not fire meta keys.

KeyUp

• Fires once at the end when you release key.
• Fires meta key.

This is the behavior in both addEventListener and jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <-- try example

(answer has been edited with correct response, screenshot & example)

A few practical facts that might be useful to decide which event to handle (run the script below and focus on the input box):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

Pressing:

• non inserting/typing keys (e.g. Shift, Ctrl) will not trigger a keypress. Press Ctrl and release it:

  keydown 17 17 Control

  keyup 17 17 Control

• keys from keyboards that apply characters transformations to other characters may lead to Dead and duplicate "keys" (e.g. ~, ´) on keydown. Press ´ and release it in order to display a double ´´:

  keydown 192 192 Dead

  keydown 192 192 ´´

  keypress 180 180 ´

  keypress 180 180 ´

  keyup 192 192 Dead

Additionally, non typing inputs (e.g. ranged <input type="range">) will still trigger all keyup, keydown and keypress events according to the pressed keys.

BLAZOR....

If you want to check which key is pressed use onkeypress OR onkeydown but if you want to get the text from the text field and then check the last key pressed for example you are scanning a barcode and you want to fire an even when the ENTER key is pressed (almost all barcode scanners send 13 "ENTER" in the last) then you should use onkeyup otherwise you will not get the text typed in the text field.

For example

<input type="text" class="form-control" @bind="@barcode" @onkeyup="BarCodeScan" placeholder="Scan" />

This will call the BarCodeScan function immediately after you will press enter by typing the code or if you scan it from scanner the BarCodeScan function will be called automatically. If you will use "onkeypress" or "onkeydown" here then the bind will not take place and you will not get the text from the text field.

The difference which I observed between keyup and keydown is

if we attach a eventhandler for keydown event and log the input box value i.e (e.target.value) it returns whatever the value was before keydown event

But if we attach a eventhandler for keyup event and log the input box value it returns the latest value including the key which was pressed

LETS UNDERSTAND WITH EXAMPLE

// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered 
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
  console.log(e.target.value);
});


// but in case of keyup event the e.target.value prints 
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
  console.log(e.target.value);
});
<input type="text" id="searchCities" />

CodeSandbox Link https://codesandbox.io/s/keydown-vs-keyup-wpj33m