{"id":17065,"date":"2020-08-08T08:46:49","date_gmt":"2020-08-08T08:46:49","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17065"},"modified":"2022-04-28T09:15:17","modified_gmt":"2022-04-28T09:15:17","slug":"jquery-keyboard-events-an-jquery-for-beginners","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/jquery-keyboard-events-an-jquery-for-beginners\/","title":{"rendered":"jQuery Keyboard Events: An jQuery for Beginners"},"content":{"rendered":"\n<p>In this blog, you learned jQuery Keyboard Events Our jQuery has three types of keyboard events.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/keyword.png\" alt=\"\" class=\"wp-image-17066\"\/><\/figure>\n\n\n\n<p><strong>Keypress<\/strong> =&gt; This means as if someone is your website who is the presser, the event will be triggered as soon as they press the key.<\/p>\n\n\n\n<p>Let&#8217;s try to understand it through an example<\/p>\n\n\n\n<p><strong>Example<\/strong>-&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/keypresss.png\" alt=\"\" class=\"wp-image-17067\"\/><\/figure>\n\n\n\n<p><strong>Now after pressing any key, my result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/result-1-1024x544.png\" alt=\"\" class=\"wp-image-17068\"\/><\/figure>\n\n\n\n<p><strong>Keyup<\/strong> =&gt; This means that the keyup&#8217;s event will be triggered as soon as it presses the keyboard button as soon as it is pressed.<\/p>\n\n\n\n<p>Let&#8217;s try to understand it through an example<\/p>\n\n\n\n<p><strong>Example -&gt;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/keyup.png\" alt=\"\" class=\"wp-image-17069\"\/><\/figure>\n\n\n\n<p><strong>Now after pressing any key, we will release the key, so my result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/keyup2-1024x546.png\" alt=\"\" class=\"wp-image-17070\"\/><\/figure>\n\n\n\n<p><strong>Keydown<\/strong> =&gt; Keydown and Capress both work together.<\/p>\n\n\n\n<p><strong>Example:-<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/down.png\" alt=\"\" class=\"wp-image-17072\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong>:-<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/result-2-1024x544.png\" alt=\"\" class=\"wp-image-17073\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, you learned jQuery Keyboard Events Our jQuery has three types of keyboard events. Keypress =&gt; This means as if someone is your website who is the presser,&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[6326,6325,6327],"class_list":["post-17065","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-keydown","tag-keypress","tag-keyup"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17065"}],"version-history":[{"count":0,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17065\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}