{"id":498,"date":"2016-02-08T20:00:29","date_gmt":"2016-02-08T19:00:29","guid":{"rendered":"http:\/\/www.psinke.nl\/blog\/?p=498"},"modified":"2016-02-08T11:13:02","modified_gmt":"2016-02-08T10:13:02","slug":"javascript-keyboard-events-the-difference-between-keypress-and-keydown","status":"publish","type":"post","link":"https:\/\/www.psinke.nl\/blog\/javascript-keyboard-events-the-difference-between-keypress-and-keydown\/","title":{"rendered":"Javascript keyboard events: the difference between keypress and keydown"},"content":{"rendered":"<div class=\"afa2b3b851443650502c43e85c746c1f\" data-index=\"1\" style=\"float: none; margin:0px;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4223201538046844\";\r\n\/* standaardblok *\/\r\ngoogle_ad_slot = \"9522527129\";\r\ngoogle_ad_width = 320;\r\ngoogle_ad_height = 50;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>Some things you learn the hard way. I was trying to catch some keyboard events in order to replace comma&#8217;s with dots in html input items and validating the input against a regular expression along the way. The results I got were at best confusing, but never as expected.<\/p>\n<p>I did some reading on sites like\u00a0<a href=\"http:\/\/javascript.info\/tutorial\/keyboard-events\" target=\"_blank\">http:\/\/javascript.info\/tutorial\/keyboard-events<\/a>, and found out there is a fundamental difference between the keypress and keydown event. This shows especially when catching the &#8220;.&#8221; &#8220;,&#8221; or decimal point (yes, the decimal point on your numeric keypad is another character!)<\/p>\n<p>The next output is consecutively a comma, a dot, and a decimal point on the numeric keypad. The keydown and keyup event present values that are unexpected, like the\u00a0\u00bc character. Only keypress shows comma and dot as expected.<\/p>\n<p><span style=\"color: #0000ff;\">keydown keyCode=188 which=188 charCode=0 char=\u00bc<\/span><br \/>\n<span style=\"color: #0000ff;\"><strong>keypress<\/strong> keyCode=44 which=44 charCode=44 char=,<\/span><br \/>\n<span style=\"color: #0000ff;\">keyup keyCode=188 which=188 charCode=0 char=\u00bc<\/span><br \/>\n<span style=\"color: #0000ff;\">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/span><br \/>\n<span style=\"color: #0000ff;\">keydown keyCode=190 which=190 charCode=0 char=\u00be<\/span><br \/>\n<span style=\"color: #0000ff;\"><strong>keypress<\/strong> keyCode=46 which=46 charCode=46 char=.<\/span><br \/>\n<span style=\"color: #0000ff;\">keyup keyCode=190 which=190 charCode=0 char=\u00be<\/span><br \/>\n<span style=\"color: #0000ff;\">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/span><br \/>\n<span style=\"color: #0000ff;\">keydown keyCode=110 which=110 charCode=0 char=n<\/span><br \/>\n<span style=\"color: #0000ff;\"><strong>keypress<\/strong> keyCode=46 which=46 charCode=46 char=.<\/span><br \/>\n<span style=\"color: #0000ff;\">keyup keyCode=110 which=110 charCode=0 char=n<\/span><\/p>\n<p>Remember this when getting unexpected results when\u00a0grabbing key-events in your web application.<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Some things you learn the hard way. I was trying to catch some keyboard events in order to replace comma&#8217;s with dots in html input items and validating the input against a regular expression along the way. The results I got were at best confusing, but never as expected. I did some reading on sites&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"footnotes":""},"categories":[192],"tags":[414,142,409,413,410,412,411],"class_list":["post-498","post","type-post","status-publish","format-aside","hentry","category-web-software-development","tag-charcode","tag-javascript","tag-key-events","tag-keycode","tag-keydown","tag-keypress","tag-keyup","post_format-post-format-aside"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":1,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/498\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}