{"id":7388,"date":"2015-10-08T12:15:34","date_gmt":"2015-10-08T09:15:34","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7388"},"modified":"2017-12-21T16:09:23","modified_gmt":"2017-12-21T14:09:23","slug":"jquery-keypress-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/","title":{"rendered":"jQuery keypress Example"},"content":{"rendered":"

The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that, .keypress()<\/code>. The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.<\/p>\n

In other words, it binds an event handler to the “keypress” JavaScript event, or triggers that event on an element.<\/p>\n

This is useful to enhance user interaction like when writing a password and want to tell the user that the length should be 6 or more characters, or when trying to have an autocomplete search box.
\n 
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Document Setup<\/h2>\n

To begin, create a new HTML document and add the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Keypress Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Note that jQuery library is linked locally, so you need to download and link it too, by clicking here<\/a>.<\/p>\n
2. .keypress()<\/strong> Basic Application<\/h2>\n
First, create a new input<\/code> element and a paragraph, p<\/code> in your HTML, which are going to be the element where we’ll write something and the element that will count how many times we’ve pressed a key on the keyboard respectively.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\nWrite something: <input type=\"text\">\r\n<p>Keypresses: <span>0<\/span><\/p>\r\n<\/pre>\n
Next, in the JS section, let’s start a variable i=0<\/code> and then increment it on every keypress like so:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\nvar i = 0;\r\n$(document).ready(function(){\r\n    $(\"input\").keypress(function(){\r\n        $(\"span\").text(i += 1);\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
The result would be:
\n\"keypress1\"<\/a>
\nThat was a basic application of the .keypress()<\/code> method where we integrated a function inside the method to cound how many times we had a keypress and show it to the user. This syntax (.keypress()<\/code> is a shorthand for .on(\"keypress\", function(){});<\/code>), so either of them will work in your real-life examples.<\/p>\n
3. Practical Examples<\/h2>\n
Below, let’s have a look on two significant examples, one of which a function one, and the other, a design consideration.<\/p>\n
3.1 A Functional Example<\/h2>\n
Here, we’ll simulate a password field where you should enter 6 or more characters for the password to be valid. First, format your HTML a bit different to have a password input field and a paragraph like this:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\nPassword: <input type=\"password\">\r\n<p><\/p>\r\n<\/pre>\n
Now, increment the variable i (which was initially set to 0) everytime there is a keypress. Then, add an if<\/code> statement, where you check if the length of the password (times any key is pressed) is less than 6, and if it is true, then tell the user this password is not valid. Otherwise, accept the password.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n<!-- JAVASCRIPT SECTION  -->\r\nvar i = 0;\r\n$(document).ready(function(){\r\n    $(\"input\").keypress(function(){\r\n        i+=1;\r\n        if (i<6) {\r\n            $(\"p\").text(\"Password must be 6 or more characters long!\");\r\n        }\r\n        else {\r\n            $(\"p\").text(\"Your password is valid!\");\r\n        }\r\n    })\r\n});\r\n<\/script>\r\n<\/pre>\n
Let’s see this in action:
\n\"A<\/a><\/p>\n
3.2 A Design Consideration with Keypress<\/h3>\n
Keypress is also used to relate design elements when capturing a kerpress, like a loading animation on a search box. So this example has taken me pretty much time so the code might be a bit longer than until now, but the idea remains, using the keypress event listener to add a loading animation.<\/p>\n
In the HTML section, I’ve created the search structure:<\/p>\n
\r\n <!-- Bootstrap -->\r\n    <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/animate.css\">\r\n\r\n  <div class=\"container\">\r\n    <div class=\"search\">\r\n    <input type=\"text\" placeholder=\"Search for anything...\">\r\n    <i class=\"glyphicon glyphicon-search\"><\/i>\r\n    <div style=\"display: none; opacity: 0.8\" class=\"loader\"><\/div>\r\n    <\/div>\r\n\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n    <script src=\"js\/bootstrap.min.js\"><\/script>\r\n<\/pre>\n
Notice some links are local ones, but you’ll get everything in your source download files.<\/p>\n
The next part was designing a nice search box in CSS: (this might not be of your interest)<\/p>\n
\r\n    <style type=\"text\/css\">\r\n.container {\r\n  margin-top: 5em;\r\n}\r\n\r\ninput {\r\n  border: transparent;\r\n  width: 35px;\r\n  height: 3em;\r\n  position: absolute;\r\n  padding-left: 3em;\r\n  background-color: #D35400;\r\n  border-radius: 0.5em;\r\n}\r\n\r\n.search {\r\n  color: white;\r\n}\r\n\r\n::-webkit-input-placeholder {\r\n  color: white;\r\n}\r\n\r\n.search {\r\n  \/*float: left;*\/\r\n  max-width: 500px;\r\n}\r\n\r\n.glyphicon {\r\n  position: relative;\r\n  padding: 1em;\r\n  color: white;\r\n}\r\n\r\n.loader:before,\r\n.loader:after,\r\n.loader {\r\n  border-radius: 50%;\r\n  width: 0.8em;\r\n  height: 0.8em;\r\n  -webkit-animation-fill-mode: both;\r\n  animation-fill-mode: both;\r\n  -webkit-animation: load7 1.5s infinite ease-in-out;\r\n  animation: load7 1.5s infinite ease-in-out;\r\n\r\n}\r\n.loader {\r\n  font-size: 15px;\r\n  margin: auto 30em;\r\n  position: absolute;\r\n  top: 3.2em;\r\n  text-indent: -9999em;\r\n  -webkit-transform: translateZ(0);\r\n  -ms-transform: translateZ(0);\r\n  transform: translateZ(0);\r\n  -webkit-animation-delay: -0.08s;\r\n  animation-delay: -0.08s;\r\n\r\n}\r\n.loader:before {\r\n  left: -1.2em;\r\n  -webkit-animation-delay: -0.16s;\r\n  animation-delay: -0.16s;\r\n}\r\n.loader:after {\r\n  left: 1.2em;\r\n}\r\n.loader:before,\r\n.loader:after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n\r\n}\r\n@-webkit-keyframes load7 {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    box-shadow: 0 2.5em 0 -1.3em #fff;\r\n  }\r\n  40% {\r\n    box-shadow: 0 2.5em 0 0 #fff;\r\n  }\r\n}\r\n@keyframes load7 {\r\n  0%,\r\n  80%,\r\n  100% {\r\n    box-shadow: 0 2.5em 0 -1.3em #fff;\r\n  }\r\n  40% {\r\n    box-shadow: 0 2.5em 0 0 #fff;\r\n  }\r\n}\r\n<\/style>\r\n<\/pre>\n
The JS section, is also more of a web designer work, but focus on the keypress method. It is used to trigger the .loader<\/code> class, which contains the css animation, giving a very nice idea of something that is loading while you’re typing:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n<!-- JAVASCRIPT SECTION  -->\r\n      $('.search').one('mouseover',function(){\r\n         $( \"input\" ).animate({\r\n          width: 500,\r\n          padding: 12\r\n        }, 300 );\r\n         $('.glyphicon').addClass('pull-right animated slideInRight');\r\n      });\r\n      $('input').keypress(function(){\r\n        $('.glyphicon').removeClass('pull-right animated slideInRight').addClass('animated bounceIn');\r\n        $(this).css('padding-left','3em');\r\n        $('.loader').show().fadeIn();\r\n      }).keyup(function(){\r\n        $(this).css('padding-left','3em');\r\n      }).focusout(function(){\r\n        $('.loader').hide().fadeOut();\r\n      });\r\n    <\/script>\r\n<\/pre>\n
Look at this outstanding result:
\n\"keypress3\"<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, the .keypress()<\/code> event is a great way to add functionality when this listener captures a press on the keyboad. It is similar to the keydown event. The event occurs when a button is pressed down.<\/p>\n
However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method to also check these keys. Cases where keypress interactivity is needed vary by where it is to be used. However, it is getting more and more used in modern websites.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Keypress<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that, .keypress(). The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs. In other words, it binds an event …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery keypress Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery keypress Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-08T09:15:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:09:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery keypress Example\",\"datePublished\":\"2015-10-08T09:15:34+00:00\",\"dateModified\":\"2017-12-21T14:09:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\"},\"wordCount\":639,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\",\"name\":\"jQuery keypress Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-10-08T09:15:34+00:00\",\"dateModified\":\"2017-12-21T14:09:23+00:00\",\"description\":\"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery keypress Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery keypress Example - Web Code Geeks - 2026","description":"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery keypress Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-10-08T09:15:34+00:00","article_modified_time":"2017-12-21T14:09:23+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery keypress Example","datePublished":"2015-10-08T09:15:34+00:00","dateModified":"2017-12-21T14:09:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/"},"wordCount":639,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/","name":"jQuery keypress Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-10-08T09:15:34+00:00","dateModified":"2017-12-21T14:09:23+00:00","description":"The aim of this example is to show you how to capture keyboard keys events, specifically when a key is pressed. In jQuery, there is a method for that,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-keypress-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery keypress Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7388"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}