{"id":2326,"date":"2021-12-21T12:06:08","date_gmt":"2021-12-21T12:06:08","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2326"},"modified":"2021-12-21T12:06:09","modified_gmt":"2021-12-21T12:06:09","slug":"how-to-check-if-caps-locks-is-on-with-javascript","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/ru\/how-to-check-if-caps-locks-is-on-with-javascript\/","title":{"rendered":"How to check if Caps Locks is on with JavaScript?"},"content":{"rendered":"\n<p>Sometimes if you\u2019re working on password inputs, you may want to be able to hint to your users when their CAPS-lock key is on, so they don\u2019t make mistakes. <\/p>\n\n\n\n<p>JavaScript provides a\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/KeyboardEvent\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">KeyboardEvent<\/a>\u00a0event object that can be used to determine the state of various keys, like caps lock, on modern browsers and IE9+.<\/p>\n\n\n\n<p>The KeyboardEvent object has a\u00a0<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/KeyboardEvent\/getModifierState\">getModifierState()<\/a>\u00a0method. The getModifierState method returns the current state of the modifier key specified: If the modifier is active (that is, the modifier key is pressed or locked), it returns true; otherwise, it returns false.<\/p>\n\n\n\n<p>First, let\u2019s create our input: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;\n    &lt;input type=\"password\" id=\"password\" placeholder=\"Enter password\"&gt;\n    &lt;span id=\"hint\"&gt;&lt;\/span&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Then let\u2019s get into JavaScript: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const passwordInput = document.querySelector('#password');\nconst passwordHint = document.querySelector('#hint');\n\npasswordInput.addEventListener('keydown', (e) =&gt; {\n  passwordHint.textContent = e.getModifierState('CapsLock')?'Hint: Your caps lock is on' : '';\n\n});<\/code><\/pre>\n\n\n\n<p>In the code above, we select both input and hint span with querySelector, then, we add an <code>eventlistener <\/code>to the input for every keydown event, to check if the caps lock is on. So, every time the user types in a character, it will check if the caps lock is on and show the hint.<\/p>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<\/div>\n<div><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" width=\"152\" height=\"213\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>Sometimes if you\u2019re working on password inputs, you may want to be able to hint to your users when their CAPS-lock key is on, so they don\u2019t make mistakes. JavaScript&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2327,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[276,277,279,31,278],"better_featured_image":{"id":2327,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1800,"height":923,"file":"2021\/12\/capslock-blog.jpg","sizes":{"thumbnail":{"file":"capslock-blog-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-150x150.jpg"},"medium_large":{"file":"capslock-blog-768x394.jpg","width":768,"height":394,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-768x394.jpg"},"penci-full-thumb":{"file":"capslock-blog-1170x600.jpg","width":1170,"height":600,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-1170x600.jpg"},"penci-slider-thumb":{"file":"capslock-blog-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-1170x663.jpg"},"penci-magazine-slider":{"file":"capslock-blog-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-780x516.jpg"},"penci-slider-full-thumb":{"file":"capslock-blog-1800x800.jpg","width":1800,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-1800x800.jpg"},"penci-thumb":{"file":"capslock-blog-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-585x390.jpg"},"penci-masonry-thumb":{"file":"capslock-blog-585x300.jpg","width":585,"height":300,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-585x300.jpg"},"penci-thumb-square":{"file":"capslock-blog-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-585x585.jpg"},"penci-thumb-vertical":{"file":"capslock-blog-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-480x650.jpg"},"penci-thumb-small":{"file":"capslock-blog-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-263x175.jpg"},"jr_insta_square":{"file":"capslock-blog-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2326,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/capslock-blog.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"ru","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2326"}],"collection":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/comments?post=2326"}],"version-history":[{"count":1,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2326\/revisions"}],"predecessor-version":[{"id":2328,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2326\/revisions\/2328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media\/2327"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media?parent=2326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/categories?post=2326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/tags?post=2326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}