In some scenarios, developers need to get the text from the text boxes while pressing the keys. For this purpose, JavaScript allows events for key pressing, including onkeyup, onkeydown, and onkeypress events. More specifically, onkeypress and onkeydown perform the same, while the onkeyup is slightly different from these two.
This blog will describe the procedure for getting the text of an input box during the onkeypress.
How to Get Text of an Input Text Box During onkeypress?
When a user hits on the keyboard’s key, the onkeypress event occurs. So, use the “onkeypress” event to access the text of the text box during onkeypress. The following is the sequence of events associated with the onkeypress event:
- onkeydown
- onkeyup
- onkeypress
onkeydown and onkeypress are the same; they occur when the user hits a key on the keyboard. While onkeyup is slightly different from these two, it occurs when the user releases the key on the keyboard.
Syntax
Follow the given syntax for the onkeypress event:
Example
In the given example, we will first create an input box, assign an id “txtbox” and attach an “onkeypress” event that will call the “getValue()” method:
Create a <p> tag with the id “fetchedText” where the fetched text from the input box will appear:
In the JavaScript file or <script> tag, define a function “getValue()” that will trigger the “onkeypress” event. Get the value of a text box using its assigned id with the help “getElementById()” method. Then, display the text using the “innerText” property:
var tbValue = document.getElementById("txtbox");
var value = tbValue.value;
document.getElementById("fetchedText").innerText = value;
}
The output indicates that the text of an input box is successfully getting on the onkeypress event:
You can also use the onkeyup() event to get the text of an input text box during onkeypress. The onkeyup occurs when the user releases the key on the keyboard:
Output
That’s all about getting the text of an input box during onkeypress.
Conclusion
To retrieve the text of an input text box during onkeypress, use the “onkeypress” event. When a user hits on the keyboard’s key, the onkeypress event is triggered. Also, use the “onkeyup” event to get the textbox’s text during onkeypress. onkeydown and onkeypress are the same, while onkeyup is slightly different from these two. It occurs when the user releases the key on the keyboard. This blog described the procedure for getting the text of an input box during the onkeypress.
