Enter Key Press Event In jQuery In Textbox
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Riya
In this article we will show you the solution of enter key press event in jQuery in textbox, here we are going to show you example to achieving result with the help of on() method and keypress event. The on() method attaches one or more event handlers for the selected elements and child elements.
The keypress event is similar to the keydown event. The event occurs when a button is pressed down. However, the keypress event is not fired for all keys.
Step By Step Guide On Enter Key Press Event In jQuery In Textbox :-
Here we defined html block with h3 tag for heading, input element for showing keypress event process and p tag for display the result.
In script block we defined on() method, which contains parameters are ‘keypress-event name, input-element name, function’.
There needs to specify paragraph element for display keypress result then which is appends with text() method.
Within text() method we retrieving input result using ‘this’ keyword that is displayed on webpage.
<!DOCTYPE html>
<html>
<head>
<title>Keypress In JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).on("keypress","input",function(e){
$("p").text($(this).val());
});
</script>
<body>
<h3>Keypress Event In Jquery</h3>
<input type="text" id="inpVal">
<p></p>
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined on() function with keypress event, which is appended on input element within that function printed keypress result by text() method. Result binds with p element defined in body tag.
- In body block we defined h3 heading with text ‘Keypress Event In Jquery’, input element defined with id attribute ‘inpVal’ and empty p tag for display result on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use keypress event on input element using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see heading ‘Keypress Event In Jquery’, input element now user needs to write on text box as per their wish.
Entering letters mirrored below with the help of keypress event as well you can try other events later we will see about them.
I hope this article on enter key press event in jQuery in textbox helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
