{"id":5662,"date":"2021-11-19T11:22:05","date_gmt":"2021-11-19T10:22:05","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=5662"},"modified":"2021-11-19T11:22:06","modified_gmt":"2021-11-19T10:22:06","slug":"onkeypress-vs-onkeyup-and-onkeydown","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/onkeypress-vs-onkeyup-and-onkeydown\/","title":{"rendered":"onKeyPress Vs. onKeyUp and onKeyDown"},"content":{"rendered":"\n<p><a href=\"https:\/\/stackoverflow.com\/a\/3396805\">https:\/\/stackoverflow.com\/a\/3396805<\/a><\/p>\n\n\n\n<p><strong>NOTE<\/strong> <code>KeyPress<\/code> is now <a href=\"https:\/\/developer.cdn.mozilla.net\/en-US\/docs\/Web\/API\/Element\/keypress_event\">deprecated<\/a>. Use <code>KeyDown<\/code> instead.<\/p>\n\n\n\n<p><code>KeyPress<\/code>, <code>KeyUp<\/code> and <code>KeyDown<\/code> are analogous to, respectively: <code>Click<\/code>, <code>MouseUp,<\/code> and <code>MouseDown<\/code>.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><code>Down<\/code> happens first<\/li><li><code>Press<\/code> happens second (when text is entered)<\/li><li><code>Up<\/code> happens last (when text input is complete).<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">The exception is <em>webkit<\/em>, which has an extra event in there:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">keydown\nkeypress\ntextInput     \nkeyup\n<\/pre>\n\n\n\n<p>Below is a snippet you can use to see for yourself when the events get fired:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">window.addEventListener(\"keyup\", log);\nwindow.addEventListener(\"keypress\", log);\nwindow.addEventListener(\"keydown\", log);\n\nfunction log(event){\n  console.log( event.type );\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/stackoverflow.com\/a\/3396805 NOTE KeyPress is now deprecated. Use KeyDown instead. KeyPress, KeyUp and KeyDown are analogous to, respectively: Click, MouseUp, and MouseDown. Down happens first Press happens second (when text is entered) Up happens last (when text input is complete). The exception is webkit, which has an extra event in there: Below is a snippet you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5662","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=5662"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5662\/revisions"}],"predecessor-version":[{"id":5663,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5662\/revisions\/5663"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=5662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=5662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=5662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}