Yogesh Chauhan's Blog

How to catch .keypress() on body using jQuery?

in jQuery on January 14, 2021

Example

Explanation

keypress() binds an event handler to the “keypress” event. It can also trigger that event on any element.

When the browser records keyboard input, the keypress event is sent to an element.

It is similar to the keydown event, except that some keys like modifier and non-printing keys (Shift, Esc, delete) trigger keydown events but they cannot trigger keypress events.

We can attach keypress event handler to any element, but the event is only sent to the element with focus.

All browsers use different properties to store this information. So, jQuery normalizes the .which property so we can reliably use it to retrieve the character code.

While keydown and keyup provide a code that indicates which key is pressed, the keypress provides info on which character was entered.

For example, keydown and keyup indicates 65 when we press a lowercase “a”, but keypress will indicate it as 97.

Interestingly, all events reports 65 for an uppercase “A”.

That’s why .keydown() or .keyup() is a better choice when catching special keystrokes such as arrow keys, .

Learn more about it on Official Docs.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What are Identifiers in JavaScript?JavaScriptHow to display a student’s individual transcript in Colleague?Colleaguefor @each loop in SCSSSCSSSome EASY-to-Understand CSS media query examplesCSSJavaScript String fromCharCode() MethodJavaScriptArray.from() Method in JavaScriptJavaScriptHow to Use password_hash and password_verify to Secure Your User’s Data (Especially Passwords)?PHPAll different methods for accessing elements in the DOM using JavaScriptJavaScriptHow to get the full URL of current page in PHP?PHPWhat are Google Web Stories and How to create them in WordPress?WordPressUNION and UNION ALL in PostgresPostgresHow to create a smooth scrolling effect with CSS?CSS