{"id":959,"date":"2012-06-22T02:52:27","date_gmt":"2012-06-22T02:52:27","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=959"},"modified":"2012-06-22T02:52:27","modified_gmt":"2012-06-22T02:52:27","slug":"jquery-arrow-keys-bind-arrow-keys-using-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-arrow-keys-bind-arrow-keys-using-jquery\/","title":{"rendered":"jQuery Arrow Keys Binding Examples"},"content":{"rendered":"<p><strong>jQuery Arrow Keys:<\/strong>\u00a0Have you ever wondered how to <strong>bind arrow keys using jQuery<\/strong>? Let&#8217;s say that you want to enhance your user experience to a website by using jQuery or you want to trigger an action when certain key, such as the Up arrow key or Down arrow key, etc. is pressed, do you know what code can be used?\u00a0In this article, I am going to share with you an easy way to <strong>bind arrow keys using jQuery<\/strong> with easy to follow examples.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery to Bind Arrow Keys<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=959\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>At one time or the other, you might end up developing an app that requires you to perform a certain action when the arrow keys are hit\/pressed. In such a case, you can execute specific code if you can find out which arrow key was hit. There are different key codes for each of the arrow key and we can use this to our advantage. And in order to use this, we will need to <em><strong>bind arrow keys<\/strong><\/em> based on their unique codes. Following are the examples to show you how to do this.<\/p>\n<h3>Example: Bind Arrow Keys using jQuery<\/h3>\n<p>This example has code that monitors for arrow key hit event and then triggers an alert indicating the arrow key that was hit. Simply execute the following code and hit the arrows keys on your keyboard to see the alert message.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Arrow Keys | Bind Arrow Keys using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\nHit the arrows keys on your keyboard to see the alert!\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$(document).keydown(function(e){\n\n\t\/\/e.which is set by jQuery for those browsers that do not normally support e.keyCode.\n\tvar keyCode = e.keyCode || e.which;\n\n    if (keyCode == 38) \n\t{ \n       alert( \"Up arrow key hit.\" );\n       return false;\n    }\n\n    if (keyCode == 40) \n\t{ \n       alert( \"Down arrow key hit.\" );\n       return false;\n    }\n\n    if (keyCode == 37) \n\t{ \n       alert( \"Left arrow key hit.\" );\n       return false;\n    }\n\n    if (keyCode == 39) \n\t{ \n       alert( \"Right arrow key hit.\" );\n       return false;\n    }\n\n});\n\n&lt;\/script&gt; \n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=959\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to <strong>bind arrow keys using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Arrow Keys:\u00a0Have you ever wondered how to bind arrow keys using jQuery? Let&#8217;s say that you want to enhance your user experience to a website by using jQuery or you want to trigger an action when certain key, such as the Up arrow key or Down arrow key, etc. is pressed, do you know [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[91,92,42,41],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-bind-arrow-keys","tag-jquery-arrow-keys","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-ft","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=959"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}