How do you tell if caps lock is on using JavaScript

Question

How do you tell if caps lock is on using JavaScript   One caveat though  I did google it and the best solution I could find was to attach an onkeypress event to every input  then check each time if the letter pressed was uppercase  and if it was  then check if shift was also held down  If it wasn t  therefore caps lock must be on  This feels really dirty and just    wasteful - surely there s a better way than this

User · Answer

You could use this script  It should work well on Windows even if the Shift key is pressed but it won t work on Mac OS if so

User · Answer

So I found this page and didn t really like the solutions I found so I figured one out and am offering it up to all of you   For me  it only matters if the caps lock is on if I m typing letters   This code solved the problem for me   Its quick and easy and gives you a capsIsOn variable to reference whenever you need it    x000D   x000D  let capsIsOn false  x000D  let capsChecked false  x000D   x000D  let capsCheck  e   gt   x000D      let letter e key  x000D      if letter length   1  amp  amp  letter match   A-Za-z      x000D          if letter   letter toLowerCase     x000D            capsIsOn true  x000D            console log  caps is on    x000D           else  x000D            console log  caps is off    x000D            x000D          capsChecked true  x000D          window removeEventListener  keyup  capsCheck   x000D       else  x000D        console log  not a letter  not capsCheck was performed    x000D        x000D   x000D    x000D   x000D  window addEventListener  keyup  capsCheck   x000D   x000D  window addEventListener  keyup   e   gt   x000D    if capsChecked  amp  amp  e keyCode   20   x000D      capsIsOn  capsIsOn  x000D      x000D      x000D   x000D   x000D

User · Answer

it is late i know but  this can be helpfull someone else    so here is my simpliest solution  with Turkish chars    function  s e        var key   e htmlEvent key       var upperCases    ABC  DEFGGHIIJKLMNO  PRSSTU  VYZXWQ       var lowerCases    abc  defgghiijklmno  prsstu  vyzxwq       var digits    0123456789        if  upperCases includes key                 document getElementById  spanLetterCase   innerText     A               else if  lowerCases includes key                 document getElementById  spanLetterCase   innerText     a               else if  digits includes key                 document getElementById  spanLetterCase   innerText     1               else               document getElementById  spanLetterCase   innerText

User · Answer

You can detect caps lock using  is letter uppercase and no shift pressed  using a keypress capture on the document  But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document   document onkeypress   function   e       e   e     window event    var s   String fromCharCode  e keyCode    e which      if    s toUpperCase       s      e shiftKey            alert  caps is on           You could grab the event during the capturing phase in browsers that support that  but it seems somewhat pointless to as it won t work on all browsers   I can t think of any other way of actually detecting caps lock status  The check is simple anyway and if non detectable characters were typed  well    then detecting wasn t necessary   There was an article on 24 ways on this last year  Quite good  but lacks international character support  use toUpperCase   to get around that

User · Answer

Javascript Code   lt script type  text javascript  gt     function isCapLockOn e      kc   e keyCode e keyCode e which     sk   e shiftKey e shiftKey   kc    16  true false      if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk          document getElementById  alert   style visibility    visible      else        document getElementById  alert   style visibility    hidden         lt  script gt    We now need to associate this script using Html   lt input type  password  name  txtPassword  onkeypress  isCapLockOn event     gt   lt div id  alert  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

Many existing answers will check for caps lock on when shift is not pressed but will not check for it if you press shift and get lowercase  or will check for that but will not also check for caps lock being off  or will check for that but will consider non-alpha keys as  off   Here is an adapted jQuery solution that will show a warning if an alpha key is pressed with caps  shift or no shift   will turn off the warning if an alpha key is pressed without caps  but will not turn the warning off or on when numbers or other keys are pressed       password   keypress function e         var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey      caps is on        s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey                 CapsWarn   show          else if   s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey           s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey       caps is off             CapsWarn   hide            else upper and lower are both same  i e  not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet

User · Answer

React  onKeyPress event             let self   this          self setState               capsLock  isCapsLockOn self  event                         onKeyUp event             let self   this          let key   event key          if  key      Shift                 self shift   false                           lt div gt        lt input name  this props name  onKeyDown   e   gt this onKeyPress e   onKeyUp   e   gt this onKeyUp e   onChange  this props onChange   gt                   this capsLockAlert     lt  div gt      function isCapsLockOn component  event            let key   event key          let keyCode   event keyCode           component lastKeyPressed   key           if  key      Shift                 component shift   true                      if  key      CapsLock                 let newCapsLockState    component state capsLock              component caps   newCapsLockState              return newCapsLockState            else               if   component lastKeyPressed      Shift   amp  amp   key     key toUpperCase    amp  amp   keyCode  gt   65  amp  amp  keyCode  lt   90    amp  amp   component shift     component caps                     component caps   true                  return true                else                   component caps   false                  return false

User · Answer

We use getModifierState to check for caps lock  it s only a member of a mouse or keyboard event so we cannot use an onfocus  The most common two ways that the password field will gain focus is with a click in or a tab  We use onclick to check for a mouse click within the input  and we use onkeyup to detect a tab from the previous input field  If the password field is the only field on the page and is auto-focused then the event will not happen until the first key is released  which is ok but not ideal  you really want caps lock tool tips to display once the password field gains focus  but for most cases this solution works like a charm     HTML   lt input type  password  id  password  onclick  checkCapsLock event   onkeyup  checkCapsLock event     gt    JS  function checkCapsLock e      if  e getModifierState  CapsLock          console log  Caps            https   codepen io anon pen KxJwjq

User · Answer

A variable that shows caps lock state   let isCapsLockOn   false   document addEventListener   keydown   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       if isCapsLockOn     caps  isCapsLockOn   caps       document addEventListener   keyup   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       if isCapsLockOn     caps  isCapsLockOn   caps        works on all browsers    canIUse

User · Answer

You can use a KeyboardEvent to detect numerous keys including the caps lock on most recent browsers   The getModifierState function will provide the state for    Alt AltGraph CapsLock Control Fn  Android  Meta NumLock OS  Windows  amp  Linux  ScrollLock Shift   This demo works in all major browsers including mobile  caniuse    passwordField addEventListener   keydown   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       console log  caps       true when you press the keyboard CapsLock key

User · Answer

Many existing answers will check for caps lock on when shift is not pressed but will not check for it if you press shift and get lowercase  or will check for that but will not also check for caps lock being off  or will check for that but will consider non-alpha keys as  off   Here is an adapted jQuery solution that will show a warning if an alpha key is pressed with caps  shift or no shift   will turn off the warning if an alpha key is pressed without caps  but will not turn the warning off or on when numbers or other keys are pressed       password   keypress function e         var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey      caps is on        s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey                 CapsWarn   show          else if   s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey           s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey       caps is off             CapsWarn   hide            else upper and lower are both same  i e  not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet

User · Answer

When you type  if caplock is on  it could automatically convert the current char to lowercase  That way even if caplocks is on  it will not behave like it is on the current page  To inform your users you could display a text saying that caplocks is on  but that the form entries are converted

User · Answer

This jQuery-based answer posted by  user110902 was useful for me  However  I improved it a little to prevent a flaw mentioned in  B N  s comment  it failed detecting CapsLock while you press Shift       example   keypress function e         var s   String fromCharCode  e which        if    s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey             s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey              alert  caps is on                Like this  it will work even while pressing Shift

User · Answer

When you type  if caplock is on  it could automatically convert the current char to lowercase  That way even if caplocks is on  it will not behave like it is on the current page  To inform your users you could display a text saying that caplocks is on  but that the form entries are converted

User · Answer

I wrote a library called capsLock which does exactly what you want it to do   Just include it on your web pages    lt script src  https   rawgit com aaditmshah capsLock master capsLock js  gt  lt  script gt    Then use it as follows   alert capsLock status    capsLock observe function  status        alert status         See the demo  http   jsfiddle net 3EXMd   The status is updated when you press the Caps Lock key  It only uses the Shift key hack to determine the correct status of the Caps Lock key  Initially the status is false  So beware

User · Answer

In jQuery      some element   keypress function e          if e keyCode    20                  caps lock was pressed                This jQuery plugin  code  implements the same idea as in Rajesh s answer a bit more succinctly

User · Answer

try to use this code          selectorOnTheInputTextBox   keypress function  e            var charCode   e target value charCodeAt e target value length - 1          var capsOn                e keyCode  amp  amp                e shiftKey  amp  amp               e ctrlKey  amp  amp              charCode  gt   65  amp  amp               charCode  lt   90               if  capsOn                    action if true             else                  action if false       Good Luck

User · Answer

You can give it a try    Added a working example   When focus is on input  turning on caps lock makes the led go red otherwise green    Haven t tested on mac linux  NOTE   Both versions are working for me   Thanks for constructive inputs in the comments  OLD VERSION  https   jsbin com mahenes edit js output Also  here is a modified version  can someone test on mac and confirm  NEW VERSION   https   jsbin com xiconuv edit js output NEW VERSION  function isCapslock e      const IS MAC    Mac  test navigator platform      const charCode   e charCode    const shiftKey   e shiftKey     if  charCode  gt   97  amp  amp  charCode  lt   122        capsLock   shiftKey      else if  charCode  gt   65  amp  amp  charCode  lt   90      amp  amp    shiftKey  amp  amp  IS MAC         capsLock    shiftKey         return capsLock     OLD VERSION  function isCapslock e      e    e    e   window event     var charCode   false    if  e which        charCode   e which      else if  e keyCode        charCode   e keyCode         var shifton   false    if  e shiftKey        shifton   e shiftKey      else if  e modifiers        shifton      e modifiers  amp  4          if  charCode  gt   97  amp  amp  charCode  lt   122  amp  amp  shifton        return true         if  charCode  gt   65  amp  amp  charCode  lt   90  amp  amp   shifton        return true         return false     For international characters  additional check can be added for the following keys as needed   You have to get the keycode range for characters you are interested in  may be by using a keymapping array which will hold all the valid use case keys you are addressing    uppercase A-Z or                   lowercase a-Z or 0-9 or                  The above keys are just sample representation

User · Answer

In jQuery       example   keypress function e         var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey             alert  caps is on                Avoid the mistake  like the backspace key   s toLowerCase       s is needed

User · Answer

Based on answer of  joshuahedlund since it worked fine for me   I made the code a function so it can be reused  and linked it to the body in my case  It can be linked to the password field only if you prefer    lt html gt   lt head gt   lt script language  javascript  type  text javascript   gt  function checkCapsLock e  divId         if e           e   e        else           e   window event            var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey      caps is on        s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey               divId  style display  block         else if   s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey           s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey       caps is off           divId  style display  none          else upper and lower are both same  i e  not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet      lt  script gt   lt style gt       errorDiv       display  none      font-size  12px      color  red      word-wrap  break-word      text-overflow  clip      max-width  200px      font-weight  normal     lt  style gt   lt  head gt   lt body  onkeypress  checkCapsLock event   CapsWarn      gt       lt input name  password  id  password  type  password  autocomplete  off  gt   lt div id  CapsWarn  class  errorDiv  gt Capslock is ON   lt  div gt       lt  body gt   lt  html gt

User · Answer

This is a solution that  in addition to checking state when writing  also toggles the warning message each time the Caps Lock key is pressed  with some limitations     It also supports non-english letters outside the A-Z range  as it checks the string character against toUpperCase   and toLowerCase   instead of checking against character range    x000D   x000D    function    x000D      Initialize to hide caps-lock-warning x000D        caps-lock-warning   hide    x000D   x000D      Sniff for Caps-Lock state x000D        password   keypress function e    x000D      var s   String fromCharCode  e which    x000D      if  s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey    x000D          s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey     x000D        this caps   true     Enables to do something on Caps-Lock keypress x000D          this  next   caps-lock-warning   show    x000D        else if  s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey    x000D                 s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey     x000D        this caps   false     Enables to do something on Caps-Lock keypress x000D          this  next   caps-lock-warning   hide    x000D         else else do nothing if not a letter we can use to differentiate x000D        x000D   x000D      Toggle warning message on Caps-Lock toggle  with some limitation  x000D      document  keydown function e   x000D      if e which  20      Caps-Lock keypress x000D        var pass   document getElementById  password    x000D        if typeof pass caps       boolean    x000D            State has been set to a known value by keypress x000D          pass caps    pass caps  x000D            pass  next   caps-lock-warning   toggle pass caps   x000D          x000D        x000D        x000D   x000D      Disable on window lost focus  because we loose track of state  x000D      window  blur function e   x000D         If window is inactive  we have no control on the caps lock toggling x000D         so better to re-set state x000D      var pass   document getElementById  password    x000D      if typeof pass caps       boolean    x000D        pass caps   null  x000D          pass  next   caps-lock-warning   hide    x000D        x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  password  id  password    gt  x000D   lt span class  caps-lock-warning  title  Caps lock is on   gt CAPS lt  span gt  x000D   x000D   x000D    Note that observing caps lock toggling is only useful if we know the state of the caps lock before the Caps Lock key is pressed  The current caps lock state is kept with a caps JavaScript property on the password element  This is set the first time we have a validation of the caps lock state when the user presses a letter that can be upper or lower case  If the window loses focus  we can no longer observe caps lock toggling  so we need to reset to an unknown state

User · Answer

Here is a custom jquery plugin  using jquery ui  made up of all the good ideas on this page and leverages the tooltip widget   The caps lock message is auto applied all password boxes and requires no changes to your current html     Custom plug in code      function             fn capsLockAlert   function              return this each function                  var capsLockOn   false              var t     this               var updateStatus   function                      if  capsLockOn                        t tooltip  open                      else                       t tooltip  close                                                t tooltip                   items   input                   position    my   left top   at   left bottom 10                     open  function  event  ui                        ui tooltip css    min-width    100px    white-space    nowrap     addClass  ui-state-error                        if   capsLockOn  t tooltip  close                                       content  function                          return     lt p style  white-space  nowrap    gt                             append     lt span class  ui-icon ui-icon-alert  style  display  inline-block  margin-right  5px  vertical-align  text-top     gt                              append  Caps Lock On                                                  off  mouseover mouseout                keydown function  e                    if  e keyCode     20  return                  capsLockOn    capsLockOn                  updateStatus                                keypress function  e                    var kc   e which    get keycode                  var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase                 var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase                 if   isUp  amp  amp   isLow  return    This isn t a character effected by caps lock                     event shiftKey does not seem to be normalized by jQuery    for IE8-                 var isShift    e shiftKey    e shiftKey     kc     16    true   false      shift is pressed                     uppercase w out shift or lowercase with shift    caps lock                 if   isUp  amp  amp   isShift      isLow  amp  amp  isShift                         capsLockOn   true                    else                       capsLockOn   false                                    updateStatus                                          jQuery     Apply to all password elements       function              password   capsLockAlert

User · Answer

In jQuery      some element   keypress function e          if e keyCode    20                  caps lock was pressed                This jQuery plugin  code  implements the same idea as in Rajesh s answer a bit more succinctly

User · Answer

try this out simple code in easy to understand  This is the Script    lt script language  Javascript  gt  function capLock e    kc   e keyCode e keyCode e which   sk   e shiftKey e shiftKey   kc    16  true false    if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk     document getElementById  divMayus   style visibility    visible    else    document getElementById  divMayus   style visibility    hidden      lt  script gt    And the Html   lt input type  password  name  txtPassword  onkeypress  capLock event     gt    lt div id  divMayus  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

I know this is an old topic but thought I would feed back in case it helps others  None of the answers to the question seem to work in IE8  I did however find this code that works in IE8   Havent tested anything below IE8 yet   This can be easily modified for jQuery if required   function capsCheck e obj        kc   e keyCode e keyCode e which        sk   e shiftKey e shiftKey   kc    16  true false         if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk            document getElementById     obj id  style visibility    visible              else document getElementById     obj id  style visibility    hidden       And the function is called through the onkeypress event like this    lt input type  password  name  txtPassword  onkeypress  capsCheck event this      gt   lt div id  capsWarningDiv  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

You can give it a try    Added a working example   When focus is on input  turning on caps lock makes the led go red otherwise green    Haven t tested on mac linux  NOTE   Both versions are working for me   Thanks for constructive inputs in the comments  OLD VERSION  https   jsbin com mahenes edit js output Also  here is a modified version  can someone test on mac and confirm  NEW VERSION   https   jsbin com xiconuv edit js output NEW VERSION  function isCapslock e      const IS MAC    Mac  test navigator platform      const charCode   e charCode    const shiftKey   e shiftKey     if  charCode  gt   97  amp  amp  charCode  lt   122        capsLock   shiftKey      else if  charCode  gt   65  amp  amp  charCode  lt   90      amp  amp    shiftKey  amp  amp  IS MAC         capsLock    shiftKey         return capsLock     OLD VERSION  function isCapslock e      e    e    e   window event     var charCode   false    if  e which        charCode   e which      else if  e keyCode        charCode   e keyCode         var shifton   false    if  e shiftKey        shifton   e shiftKey      else if  e modifiers        shifton      e modifiers  amp  4          if  charCode  gt   97  amp  amp  charCode  lt   122  amp  amp  shifton        return true         if  charCode  gt   65  amp  amp  charCode  lt   90  amp  amp   shifton        return true         return false     For international characters  additional check can be added for the following keys as needed   You have to get the keycode range for characters you are interested in  may be by using a keymapping array which will hold all the valid use case keys you are addressing    uppercase A-Z or                   lowercase a-Z or 0-9 or                  The above keys are just sample representation

User · Answer

In this below code it will be show alert when Caps lock on and they press key using shift    if we return false  then current char will not append to text page       password   keypress function e            e keyCode is not work in FF  SO  it will        automatically get the value of e which        var s   String fromCharCode  e keyCode    e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey                 alert  caps is on                return false        else  if   s toUpperCase       s                alert  caps is on and Shiftkey pressed                return false

User · Answer

try to use this code          selectorOnTheInputTextBox   keypress function  e            var charCode   e target value charCodeAt e target value length - 1          var capsOn                e keyCode  amp  amp                e shiftKey  amp  amp               e ctrlKey  amp  amp              charCode  gt   65  amp  amp               charCode  lt   90               if  capsOn                    action if true             else                  action if false       Good Luck

User · Answer

You could use this script  It should work well on Windows even if the Shift key is pressed but it won t work on Mac OS if so

User · Answer

You can detect caps lock using  is letter uppercase and no shift pressed  using a keypress capture on the document  But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document   document onkeypress   function   e       e   e     window event    var s   String fromCharCode  e keyCode    e which      if    s toUpperCase       s      e shiftKey            alert  caps is on           You could grab the event during the capturing phase in browsers that support that  but it seems somewhat pointless to as it won t work on all browsers   I can t think of any other way of actually detecting caps lock status  The check is simple anyway and if non detectable characters were typed  well    then detecting wasn t necessary   There was an article on 24 ways on this last year  Quite good  but lacks international character support  use toUpperCase   to get around that

User · Answer

In JQuery  This covers the event handling in Firefox and will check for both unexpected uppercase and lowercase characters  This presupposes an  lt input id  password  type  password  name  whatever   gt element and a separate element with id  capsLockWarning  that has the warning we want to show  but is hidden otherwise        password   keypress function e        e   e    window event          An empty field resets the visibility      if  this value                       capsLockWarning   hide            return                We need alphabetic characters to make a match      var character   String fromCharCode e keyCode    e which       if  character toUpperCase       character toLowerCase              return                SHIFT doesn t usually give us a lowercase character  Check for this        and for when we get a lowercase character when SHIFT is enabled       if   e shiftKey  amp  amp  character toLowerCase       character               e shiftKey  amp  amp  character toUpperCase       character                 capsLockWarning   show          else               capsLockWarning   hide

User · Answer

You can detect caps lock using  is letter uppercase and no shift pressed  using a keypress capture on the document  But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document   document onkeypress   function   e       e   e     window event    var s   String fromCharCode  e keyCode    e which      if    s toUpperCase       s      e shiftKey            alert  caps is on           You could grab the event during the capturing phase in browsers that support that  but it seems somewhat pointless to as it won t work on all browsers   I can t think of any other way of actually detecting caps lock status  The check is simple anyway and if non detectable characters were typed  well    then detecting wasn t necessary   There was an article on 24 ways on this last year  Quite good  but lacks international character support  use toUpperCase   to get around that

User · Answer

This jQuery-based answer posted by  user110902 was useful for me  However  I improved it a little to prevent a flaw mentioned in  B N  s comment  it failed detecting CapsLock while you press Shift       example   keypress function e         var s   String fromCharCode  e which        if    s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey             s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey              alert  caps is on                Like this  it will work even while pressing Shift

User · Answer

In jQuery       example   keypress function e         var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey             alert  caps is on                Avoid the mistake  like the backspace key   s toLowerCase       s is needed

User · Answer

Based on answer of  joshuahedlund since it worked fine for me   I made the code a function so it can be reused  and linked it to the body in my case  It can be linked to the password field only if you prefer    lt html gt   lt head gt   lt script language  javascript  type  text javascript   gt  function checkCapsLock e  divId         if e           e   e        else           e   window event            var s   String fromCharCode  e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey      caps is on        s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey               divId  style display  block         else if   s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey           s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey       caps is off           divId  style display  none          else upper and lower are both same  i e  not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet      lt  script gt   lt style gt       errorDiv       display  none      font-size  12px      color  red      word-wrap  break-word      text-overflow  clip      max-width  200px      font-weight  normal     lt  style gt   lt  head gt   lt body  onkeypress  checkCapsLock event   CapsWarn      gt       lt input name  password  id  password  type  password  autocomplete  off  gt   lt div id  CapsWarn  class  errorDiv  gt Capslock is ON   lt  div gt       lt  body gt   lt  html gt

User · Answer

For jQuery with twitter bootstrap  Check caps locked for the following characters   uppercase A-Z or                                               amp                                            lowercase a-Z or 0-9 or                                          check for CAPS LOCK on all password fields       input type  password     keypress function e        var kc   e which     get keycode      var isUpperCase     kc  gt   65  amp  amp  kc  lt   90      kc  gt   33  amp  amp  kc  lt   34      kc  gt   36  amp  amp  kc  lt   39      kc  gt   40  amp  amp  kc  lt   42     kc    47     kc  gt   58  amp  amp  kc  lt   59     kc    61    kc    63    kc    167    kc    196    kc    214    kc    220    true   false     uppercase A-Z or                                               amp                                     var isLowerCase     kc  gt   97  amp  amp  kc  lt   122      kc  gt   48  amp  amp  kc  lt   57     kc    35     kc  gt   43  amp  amp  kc  lt   44     kc    46    kc    228    kc    223    kc    246    kc    252    true   false     lowercase a-Z or 0-9 or                                    event shiftKey does not seem to be normalized by jQuery    for IE8-     var isShift    e shiftKey    e shiftKey     kc    16    true   false      shift is pressed         uppercase w out shift or lowercase with shift    caps lock     if   isUpperCase  amp  amp   isShift      isLowerCase  amp  amp  isShift               this  next   form-control-feedback   show   parent   addClass  has-warning has-feedback   next   capsWarn   show          else             this  next   form-control-feedback   hide   parent   removeClass  has-warning has-feedback   next   capsWarn   hide             after   lt span class  glyphicon glyphicon-warning-sign form-control-feedback  style  display none   gt  lt  span gt    parent   after   lt span class  capsWarn text-danger  style  display none   gt Is your CAPSLOCK on  lt  span gt       live demo on jsfiddle

User · Answer

The top answers here didn t work for me for a couple of reasons  un-commented code with a dead link and an incomplete solution   So I spent a few hours trying everyone s out and getting the best I could  here s mine  including jQuery and non-jQuery   jQuery  Note that jQuery normalizes the event object so some checks are missing  I ve also narrowed it to all password fields  since that s the biggest reason to need it  and added a warning message  This has been tested in Chrome  Mozilla  Opera  and IE6-8  Stable and catches all capslock states EXCEPT when numbers or spaces are pressed      check for CAPS LOCK on all password fields       input type  password     keypress function e         var  warn     this  next   capsWarn       handle the warning mssg     var kc   e which    get keycode     var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase     var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase        event shiftKey does not seem to be normalized by jQuery    for IE8-     var isShift     e shiftKey     e shiftKey      kc    16    true   false       shift is pressed         uppercase w out shift or lowercase with shift    caps lock     if    isUp  amp  amp   isShift      isLow  amp  amp  isShift               warn show          else            warn hide              after   lt span class  capsWarn error  style  display none   gt Is your CAPSLOCK on  lt  span gt       Without jQuery  Some of the other jQuery-less solutions lacked IE fallbacks   Zappa patched it   document onkeypress   function   e         e    e    e   window event       var kc     e keyCode     e keyCode   e which     get keycode     var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase     var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase     var isShift     e shiftKey     e shiftKey      kc    16    true   false       shift is pressed -- works for IE8-         uppercase w out shift or lowercase with shift    caps lock     if    isUp  amp  amp   isShift      isLow  amp  amp  isShift              alert  CAPSLOCK is on        do your thing here       else              no CAPSLOCK to speak of              Note  Check out the solutions of  Borgar   Joe Liversedge  and  Zappa  and the plugin developed by  Pavel Azanov  which I have not tried but is a good idea  If someone knows a way to expand the scope beyond A-Za-z  please edit away  Also  jQuery versions of this question are closed as duplicate  so that s why I m posting both here

User · Answer

You can detect caps lock using  is letter uppercase and no shift pressed  using a keypress capture on the document  But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document   document onkeypress   function   e       e   e     window event    var s   String fromCharCode  e keyCode    e which      if    s toUpperCase       s      e shiftKey            alert  caps is on           You could grab the event during the capturing phase in browsers that support that  but it seems somewhat pointless to as it won t work on all browsers   I can t think of any other way of actually detecting caps lock status  The check is simple anyway and if non detectable characters were typed  well    then detecting wasn t necessary   There was an article on 24 ways on this last year  Quite good  but lacks international character support  use toUpperCase   to get around that

User · Answer

This is a solution that  in addition to checking state when writing  also toggles the warning message each time the Caps Lock key is pressed  with some limitations     It also supports non-english letters outside the A-Z range  as it checks the string character against toUpperCase   and toLowerCase   instead of checking against character range    x000D   x000D    function    x000D      Initialize to hide caps-lock-warning x000D        caps-lock-warning   hide    x000D   x000D      Sniff for Caps-Lock state x000D        password   keypress function e    x000D      var s   String fromCharCode  e which    x000D      if  s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey    x000D          s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp  e shiftKey     x000D        this caps   true     Enables to do something on Caps-Lock keypress x000D          this  next   caps-lock-warning   show    x000D        else if  s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp   e shiftKey    x000D                 s toLowerCase       s  amp  amp  s toUpperCase       s  amp  amp  e shiftKey     x000D        this caps   false     Enables to do something on Caps-Lock keypress x000D          this  next   caps-lock-warning   hide    x000D         else else do nothing if not a letter we can use to differentiate x000D        x000D   x000D      Toggle warning message on Caps-Lock toggle  with some limitation  x000D      document  keydown function e   x000D      if e which  20      Caps-Lock keypress x000D        var pass   document getElementById  password    x000D        if typeof pass caps       boolean    x000D            State has been set to a known value by keypress x000D          pass caps    pass caps  x000D            pass  next   caps-lock-warning   toggle pass caps   x000D          x000D        x000D        x000D   x000D      Disable on window lost focus  because we loose track of state  x000D      window  blur function e   x000D         If window is inactive  we have no control on the caps lock toggling x000D         so better to re-set state x000D      var pass   document getElementById  password    x000D      if typeof pass caps       boolean    x000D        pass caps   null  x000D          pass  next   caps-lock-warning   hide    x000D        x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  password  id  password    gt  x000D   lt span class  caps-lock-warning  title  Caps lock is on   gt CAPS lt  span gt  x000D   x000D   x000D    Note that observing caps lock toggling is only useful if we know the state of the caps lock before the Caps Lock key is pressed  The current caps lock state is kept with a caps JavaScript property on the password element  This is set the first time we have a validation of the caps lock state when the user presses a letter that can be upper or lower case  If the window loses focus  we can no longer observe caps lock toggling  so we need to reset to an unknown state

User · Answer

In jQuery      some element   keypress function e          if e keyCode    20                  caps lock was pressed                This jQuery plugin  code  implements the same idea as in Rajesh s answer a bit more succinctly

User · Answer

You can give it a try    Added a working example   When focus is on input  turning on caps lock makes the led go red otherwise green    Haven t tested on mac linux  NOTE   Both versions are working for me   Thanks for constructive inputs in the comments  OLD VERSION  https   jsbin com mahenes edit js output Also  here is a modified version  can someone test on mac and confirm  NEW VERSION   https   jsbin com xiconuv edit js output NEW VERSION  function isCapslock e      const IS MAC    Mac  test navigator platform      const charCode   e charCode    const shiftKey   e shiftKey     if  charCode  gt   97  amp  amp  charCode  lt   122        capsLock   shiftKey      else if  charCode  gt   65  amp  amp  charCode  lt   90      amp  amp    shiftKey  amp  amp  IS MAC         capsLock    shiftKey         return capsLock     OLD VERSION  function isCapslock e      e    e    e   window event     var charCode   false    if  e which        charCode   e which      else if  e keyCode        charCode   e keyCode         var shifton   false    if  e shiftKey        shifton   e shiftKey      else if  e modifiers        shifton      e modifiers  amp  4          if  charCode  gt   97  amp  amp  charCode  lt   122  amp  amp  shifton        return true         if  charCode  gt   65  amp  amp  charCode  lt   90  amp  amp   shifton        return true         return false     For international characters  additional check can be added for the following keys as needed   You have to get the keycode range for characters you are interested in  may be by using a keymapping array which will hold all the valid use case keys you are addressing    uppercase A-Z or                   lowercase a-Z or 0-9 or                  The above keys are just sample representation

User · Answer

There is a much simpler solution for detecting caps-lock   function isCapsLockOn event        var s   String fromCharCode event which       if  s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   event shiftKey            return true

User · Answer

try this out simple code in easy to understand  This is the Script    lt script language  Javascript  gt  function capLock e    kc   e keyCode e keyCode e which   sk   e shiftKey e shiftKey   kc    16  true false    if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk     document getElementById  divMayus   style visibility    visible    else    document getElementById  divMayus   style visibility    hidden      lt  script gt    And the Html   lt input type  password  name  txtPassword  onkeypress  capLock event     gt    lt div id  divMayus  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

A variable that shows caps lock state   let isCapsLockOn   false   document addEventListener   keydown   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       if isCapsLockOn     caps  isCapsLockOn   caps       document addEventListener   keyup   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       if isCapsLockOn     caps  isCapsLockOn   caps        works on all browsers    canIUse

User · Answer

Recently there was a similar question on hashcode com  and I created a jQuery plugin to deal with it  It also supports the recognition of caps lock on numbers   On the standard German keyboard layout caps lock has effect on numbers    You can check the latest version here  jquery capsChecker

User · Answer

You can give it a try    Added a working example   When focus is on input  turning on caps lock makes the led go red otherwise green    Haven t tested on mac linux  NOTE   Both versions are working for me   Thanks for constructive inputs in the comments  OLD VERSION  https   jsbin com mahenes edit js output Also  here is a modified version  can someone test on mac and confirm  NEW VERSION   https   jsbin com xiconuv edit js output NEW VERSION  function isCapslock e      const IS MAC    Mac  test navigator platform      const charCode   e charCode    const shiftKey   e shiftKey     if  charCode  gt   97  amp  amp  charCode  lt   122        capsLock   shiftKey      else if  charCode  gt   65  amp  amp  charCode  lt   90      amp  amp    shiftKey  amp  amp  IS MAC         capsLock    shiftKey         return capsLock     OLD VERSION  function isCapslock e      e    e    e   window event     var charCode   false    if  e which        charCode   e which      else if  e keyCode        charCode   e keyCode         var shifton   false    if  e shiftKey        shifton   e shiftKey      else if  e modifiers        shifton      e modifiers  amp  4          if  charCode  gt   97  amp  amp  charCode  lt   122  amp  amp  shifton        return true         if  charCode  gt   65  amp  amp  charCode  lt   90  amp  amp   shifton        return true         return false     For international characters  additional check can be added for the following keys as needed   You have to get the keycode range for characters you are interested in  may be by using a keymapping array which will hold all the valid use case keys you are addressing    uppercase A-Z or                   lowercase a-Z or 0-9 or                  The above keys are just sample representation

User · Answer

This code detects caps lock no matter the case or if the shift key is pressed       password   keypress function e         var s   String fromCharCode  e which        if    s toUpperCase       s  amp  amp   e shiftKey                    s toLowerCase       s  amp  amp  e shiftKey              alert  caps is on

User · Answer

In jQuery      some element   keypress function e          if e keyCode    20                  caps lock was pressed                This jQuery plugin  code  implements the same idea as in Rajesh s answer a bit more succinctly

User · Answer

Javascript Code   lt script type  text javascript  gt     function isCapLockOn e      kc   e keyCode e keyCode e which     sk   e shiftKey e shiftKey   kc    16  true false      if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk          document getElementById  alert   style visibility    visible      else        document getElementById  alert   style visibility    hidden         lt  script gt    We now need to associate this script using Html   lt input type  password  name  txtPassword  onkeypress  isCapLockOn event     gt   lt div id  alert  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

Recently there was a similar question on hashcode com  and I created a jQuery plugin to deal with it  It also supports the recognition of caps lock on numbers   On the standard German keyboard layout caps lock has effect on numbers    You can check the latest version here  jquery capsChecker

User · Answer

it is late i know but  this can be helpfull someone else    so here is my simpliest solution  with Turkish chars    function  s e        var key   e htmlEvent key       var upperCases    ABC  DEFGGHIIJKLMNO  PRSSTU  VYZXWQ       var lowerCases    abc  defgghiijklmno  prsstu  vyzxwq       var digits    0123456789        if  upperCases includes key                 document getElementById  spanLetterCase   innerText     A               else if  lowerCases includes key                 document getElementById  spanLetterCase   innerText     a               else if  digits includes key                 document getElementById  spanLetterCase   innerText     1               else               document getElementById  spanLetterCase   innerText

User · Answer

Here is a custom jquery plugin  using jquery ui  made up of all the good ideas on this page and leverages the tooltip widget   The caps lock message is auto applied all password boxes and requires no changes to your current html     Custom plug in code      function             fn capsLockAlert   function              return this each function                  var capsLockOn   false              var t     this               var updateStatus   function                      if  capsLockOn                        t tooltip  open                      else                       t tooltip  close                                                t tooltip                   items   input                   position    my   left top   at   left bottom 10                     open  function  event  ui                        ui tooltip css    min-width    100px    white-space    nowrap     addClass  ui-state-error                        if   capsLockOn  t tooltip  close                                       content  function                          return     lt p style  white-space  nowrap    gt                             append     lt span class  ui-icon ui-icon-alert  style  display  inline-block  margin-right  5px  vertical-align  text-top     gt                              append  Caps Lock On                                                  off  mouseover mouseout                keydown function  e                    if  e keyCode     20  return                  capsLockOn    capsLockOn                  updateStatus                                keypress function  e                    var kc   e which    get keycode                  var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase                 var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase                 if   isUp  amp  amp   isLow  return    This isn t a character effected by caps lock                     event shiftKey does not seem to be normalized by jQuery    for IE8-                 var isShift    e shiftKey    e shiftKey     kc     16    true   false      shift is pressed                     uppercase w out shift or lowercase with shift    caps lock                 if   isUp  amp  amp   isShift      isLow  amp  amp  isShift                         capsLockOn   true                    else                       capsLockOn   false                                    updateStatus                                          jQuery     Apply to all password elements       function              password   capsLockAlert

User · Answer

Yet another version  clear and simple  handles shifted capsLock  and not constrained to ascii I think   document onkeypress   function  e        e   e    window event      if  e charCode     0    e ctrlKey    document onkeypress punctuation indexOf e charCode   gt   0          return      var s   String fromCharCode e charCode      or e keyCode for compatibility  but then have to handle MORE non-character keys     var s2   e shiftKey   s toUpperCase     s toLowerCase        var capsLockOn    s2     s       document getElementById  capslockWarning   style display   capsLockOn         none     document onkeypress punctuation    33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 91 92 93 94 95 96 123 124 125 126     Edit  Sense of capsLockOn was reversed  doh  fixed   Edit  2  After checking this out some more  I ve made a few changes  a bit more detailed code unfortunately  but it handles more actions appropriately    Using e charCode instead of e keyCode and checking for 0 values skips a lot of non-character keypresses  without coding anything specific to a given language or charset  From my understanding  it s slightly less compatible  so older  non-mainstream  or mobile browsers may not behave as this code expects  but it s worth it  for my situation anyway  Checking against a list of known punctuation codes prevents them from being seen as false negatives  since they re not affected by caps lock  Without this  the caps lock indicator gets hidden when you type any of those punctuation characters  By specifying an excluded set  rather than an included one  it should be more compatible with extended characters  This is the ugliest  special-casiest bit  and there s some chance that non-Western languages have different enough punctuation and or punctuation codes to be a problem  but again it s worth it IMO  at least for my situation

User · Answer

This code detects caps lock no matter the case or if the shift key is pressed       password   keypress function e         var s   String fromCharCode  e which        if    s toUpperCase       s  amp  amp   e shiftKey                    s toLowerCase       s  amp  amp  e shiftKey              alert  caps is on

User · Answer

We use getModifierState to check for caps lock  it s only a member of a mouse or keyboard event so we cannot use an onfocus  The most common two ways that the password field will gain focus is with a click in or a tab  We use onclick to check for a mouse click within the input  and we use onkeyup to detect a tab from the previous input field  If the password field is the only field on the page and is auto-focused then the event will not happen until the first key is released  which is ok but not ideal  you really want caps lock tool tips to display once the password field gains focus  but for most cases this solution works like a charm     HTML   lt input type  password  id  password  onclick  checkCapsLock event   onkeyup  checkCapsLock event     gt    JS  function checkCapsLock e      if  e getModifierState  CapsLock          console log  Caps            https   codepen io anon pen KxJwjq

User · Answer

I wrote a library called capsLock which does exactly what you want it to do   Just include it on your web pages    lt script src  https   rawgit com aaditmshah capsLock master capsLock js  gt  lt  script gt    Then use it as follows   alert capsLock status    capsLock observe function  status        alert status         See the demo  http   jsfiddle net 3EXMd   The status is updated when you press the Caps Lock key  It only uses the Shift key hack to determine the correct status of the Caps Lock key  Initially the status is false  So beware

User · Answer

Mottie s and Diego Vieira s response above is what we ended up using and should be the accepted answer now  However  before I noticed it  I wrote this little javascript function that doesn t rely on character codes     var capsLockIsOnKeyDown    shiftWasDownDuringLastChar  false    capsLockIsOnKeyDown  function event        var eventWasShiftKeyDown   event which     16      var capsLockIsOn   false      var shifton   false      if  event shiftKey            shifton   event shiftKey        else if  event modifiers            shifton      event modifiers  amp  4              if  event target value length  gt  0  amp  amp   eventWasShiftKeyDown          var lastChar   event target value event target value length-1         var isAlpha      a-zA-Z   test lastChar          if  isAlpha            if  lastChar toUpperCase       lastChar  amp  amp  lastChar toLowerCase       lastChar            amp  amp   event shiftKey  amp  amp   capsLockIsOnKeyDown shiftWasDownDuringLastChar              capsLockIsOn    true                              capsLockIsOnKeyDown shiftWasDownDuringLastChar   shifton      return capsLockIsOn          Then call it in an event handler like so capsLockIsOnKeyDown capsLockIsOnKeyDown event   But again  we ended up just using  Mottie s and  Diego Vieira s response

User · Answer

For jQuery with twitter bootstrap  Check caps locked for the following characters   uppercase A-Z or                                               amp                                            lowercase a-Z or 0-9 or                                          check for CAPS LOCK on all password fields       input type  password     keypress function e        var kc   e which     get keycode      var isUpperCase     kc  gt   65  amp  amp  kc  lt   90      kc  gt   33  amp  amp  kc  lt   34      kc  gt   36  amp  amp  kc  lt   39      kc  gt   40  amp  amp  kc  lt   42     kc    47     kc  gt   58  amp  amp  kc  lt   59     kc    61    kc    63    kc    167    kc    196    kc    214    kc    220    true   false     uppercase A-Z or                                               amp                                     var isLowerCase     kc  gt   97  amp  amp  kc  lt   122      kc  gt   48  amp  amp  kc  lt   57     kc    35     kc  gt   43  amp  amp  kc  lt   44     kc    46    kc    228    kc    223    kc    246    kc    252    true   false     lowercase a-Z or 0-9 or                                    event shiftKey does not seem to be normalized by jQuery    for IE8-     var isShift    e shiftKey    e shiftKey     kc    16    true   false      shift is pressed         uppercase w out shift or lowercase with shift    caps lock     if   isUpperCase  amp  amp   isShift      isLowerCase  amp  amp  isShift               this  next   form-control-feedback   show   parent   addClass  has-warning has-feedback   next   capsWarn   show          else             this  next   form-control-feedback   hide   parent   removeClass  has-warning has-feedback   next   capsWarn   hide             after   lt span class  glyphicon glyphicon-warning-sign form-control-feedback  style  display none   gt  lt  span gt    parent   after   lt span class  capsWarn text-danger  style  display none   gt Is your CAPSLOCK on  lt  span gt       live demo on jsfiddle

User · Answer

Mottie s and Diego Vieira s response above is what we ended up using and should be the accepted answer now  However  before I noticed it  I wrote this little javascript function that doesn t rely on character codes     var capsLockIsOnKeyDown    shiftWasDownDuringLastChar  false    capsLockIsOnKeyDown  function event        var eventWasShiftKeyDown   event which     16      var capsLockIsOn   false      var shifton   false      if  event shiftKey            shifton   event shiftKey        else if  event modifiers            shifton      event modifiers  amp  4              if  event target value length  gt  0  amp  amp   eventWasShiftKeyDown          var lastChar   event target value event target value length-1         var isAlpha      a-zA-Z   test lastChar          if  isAlpha            if  lastChar toUpperCase       lastChar  amp  amp  lastChar toLowerCase       lastChar            amp  amp   event shiftKey  amp  amp   capsLockIsOnKeyDown shiftWasDownDuringLastChar              capsLockIsOn    true                              capsLockIsOnKeyDown shiftWasDownDuringLastChar   shifton      return capsLockIsOn          Then call it in an event handler like so capsLockIsOnKeyDown capsLockIsOnKeyDown event   But again  we ended up just using  Mottie s and  Diego Vieira s response

User · Answer

In JQuery  This covers the event handling in Firefox and will check for both unexpected uppercase and lowercase characters  This presupposes an  lt input id  password  type  password  name  whatever   gt element and a separate element with id  capsLockWarning  that has the warning we want to show  but is hidden otherwise        password   keypress function e        e   e    window event          An empty field resets the visibility      if  this value                       capsLockWarning   hide            return                We need alphabetic characters to make a match      var character   String fromCharCode e keyCode    e which       if  character toUpperCase       character toLowerCase              return                SHIFT doesn t usually give us a lowercase character  Check for this        and for when we get a lowercase character when SHIFT is enabled       if   e shiftKey  amp  amp  character toLowerCase       character               e shiftKey  amp  amp  character toUpperCase       character                 capsLockWarning   show          else               capsLockWarning   hide

User · Answer

I know this is an old topic but thought I would feed back in case it helps others  None of the answers to the question seem to work in IE8  I did however find this code that works in IE8   Havent tested anything below IE8 yet   This can be easily modified for jQuery if required   function capsCheck e obj        kc   e keyCode e keyCode e which        sk   e shiftKey e shiftKey   kc    16  true false         if   kc  gt   65  amp  amp  kc  lt   90   amp  amp   sk     kc  gt   97  amp  amp  kc  lt   122   amp  amp  sk            document getElementById     obj id  style visibility    visible              else document getElementById     obj id  style visibility    hidden       And the function is called through the onkeypress event like this    lt input type  password  name  txtPassword  onkeypress  capsCheck event this      gt   lt div id  capsWarningDiv  style  visibility hidden  gt Caps Lock is on  lt  div gt

User · Answer

There is a much simpler solution for detecting caps-lock   function isCapsLockOn event        var s   String fromCharCode event which       if  s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   event shiftKey            return true

User · Answer

In this below code it will be show alert when Caps lock on and they press key using shift    if we return false  then current char will not append to text page       password   keypress function e            e keyCode is not work in FF  SO  it will        automatically get the value of e which        var s   String fromCharCode  e keyCode    e which        if   s toUpperCase       s  amp  amp  s toLowerCase       s  amp  amp   e shiftKey                 alert  caps is on                return false        else  if   s toUpperCase       s                alert  caps is on and Shiftkey pressed                return false

User · Answer

Yet another version  clear and simple  handles shifted capsLock  and not constrained to ascii I think   document onkeypress   function  e        e   e    window event      if  e charCode     0    e ctrlKey    document onkeypress punctuation indexOf e charCode   gt   0          return      var s   String fromCharCode e charCode      or e keyCode for compatibility  but then have to handle MORE non-character keys     var s2   e shiftKey   s toUpperCase     s toLowerCase        var capsLockOn    s2     s       document getElementById  capslockWarning   style display   capsLockOn         none     document onkeypress punctuation    33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 91 92 93 94 95 96 123 124 125 126     Edit  Sense of capsLockOn was reversed  doh  fixed   Edit  2  After checking this out some more  I ve made a few changes  a bit more detailed code unfortunately  but it handles more actions appropriately    Using e charCode instead of e keyCode and checking for 0 values skips a lot of non-character keypresses  without coding anything specific to a given language or charset  From my understanding  it s slightly less compatible  so older  non-mainstream  or mobile browsers may not behave as this code expects  but it s worth it  for my situation anyway  Checking against a list of known punctuation codes prevents them from being seen as false negatives  since they re not affected by caps lock  Without this  the caps lock indicator gets hidden when you type any of those punctuation characters  By specifying an excluded set  rather than an included one  it should be more compatible with extended characters  This is the ugliest  special-casiest bit  and there s some chance that non-Western languages have different enough punctuation and or punctuation codes to be a problem  but again it s worth it IMO  at least for my situation

User · Answer

React  onKeyPress event             let self   this          self setState               capsLock  isCapsLockOn self  event                         onKeyUp event             let self   this          let key   event key          if  key      Shift                 self shift   false                           lt div gt        lt input name  this props name  onKeyDown   e   gt this onKeyPress e   onKeyUp   e   gt this onKeyUp e   onChange  this props onChange   gt                   this capsLockAlert     lt  div gt      function isCapsLockOn component  event            let key   event key          let keyCode   event keyCode           component lastKeyPressed   key           if  key      Shift                 component shift   true                      if  key      CapsLock                 let newCapsLockState    component state capsLock              component caps   newCapsLockState              return newCapsLockState            else               if   component lastKeyPressed      Shift   amp  amp   key     key toUpperCase    amp  amp   keyCode  gt   65  amp  amp  keyCode  lt   90    amp  amp   component shift     component caps                     component caps   true                  return true                else                   component caps   false                  return false

User · Answer

The top answers here didn t work for me for a couple of reasons  un-commented code with a dead link and an incomplete solution   So I spent a few hours trying everyone s out and getting the best I could  here s mine  including jQuery and non-jQuery   jQuery  Note that jQuery normalizes the event object so some checks are missing  I ve also narrowed it to all password fields  since that s the biggest reason to need it  and added a warning message  This has been tested in Chrome  Mozilla  Opera  and IE6-8  Stable and catches all capslock states EXCEPT when numbers or spaces are pressed      check for CAPS LOCK on all password fields       input type  password     keypress function e         var  warn     this  next   capsWarn       handle the warning mssg     var kc   e which    get keycode     var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase     var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase        event shiftKey does not seem to be normalized by jQuery    for IE8-     var isShift     e shiftKey     e shiftKey      kc    16    true   false       shift is pressed         uppercase w out shift or lowercase with shift    caps lock     if    isUp  amp  amp   isShift      isLow  amp  amp  isShift               warn show          else            warn hide              after   lt span class  capsWarn error  style  display none   gt Is your CAPSLOCK on  lt  span gt       Without jQuery  Some of the other jQuery-less solutions lacked IE fallbacks   Zappa patched it   document onkeypress   function   e         e    e    e   window event       var kc     e keyCode     e keyCode   e which     get keycode     var isUp    kc  gt   65  amp  amp  kc  lt   90    true   false     uppercase     var isLow    kc  gt   97  amp  amp  kc  lt   122    true   false     lowercase     var isShift     e shiftKey     e shiftKey      kc    16    true   false       shift is pressed -- works for IE8-         uppercase w out shift or lowercase with shift    caps lock     if    isUp  amp  amp   isShift      isLow  amp  amp  isShift              alert  CAPSLOCK is on        do your thing here       else              no CAPSLOCK to speak of              Note  Check out the solutions of  Borgar   Joe Liversedge  and  Zappa  and the plugin developed by  Pavel Azanov  which I have not tried but is a good idea  If someone knows a way to expand the scope beyond A-Za-z  please edit away  Also  jQuery versions of this question are closed as duplicate  so that s why I m posting both here

User · Answer

So I found this page and didn t really like the solutions I found so I figured one out and am offering it up to all of you   For me  it only matters if the caps lock is on if I m typing letters   This code solved the problem for me   Its quick and easy and gives you a capsIsOn variable to reference whenever you need it    x000D   x000D  let capsIsOn false  x000D  let capsChecked false  x000D   x000D  let capsCheck  e   gt   x000D      let letter e key  x000D      if letter length   1  amp  amp  letter match   A-Za-z      x000D          if letter   letter toLowerCase     x000D            capsIsOn true  x000D            console log  caps is on    x000D           else  x000D            console log  caps is off    x000D            x000D          capsChecked true  x000D          window removeEventListener  keyup  capsCheck   x000D       else  x000D        console log  not a letter  not capsCheck was performed    x000D        x000D   x000D    x000D   x000D  window addEventListener  keyup  capsCheck   x000D   x000D  window addEventListener  keyup   e   gt   x000D    if capsChecked  amp  amp  e keyCode   20   x000D      capsIsOn  capsIsOn  x000D      x000D      x000D   x000D   x000D

User · Answer

You can use a KeyboardEvent to detect numerous keys including the caps lock on most recent browsers   The getModifierState function will provide the state for    Alt AltGraph CapsLock Control Fn  Android  Meta NumLock OS  Windows  amp  Linux  ScrollLock Shift   This demo works in all major browsers including mobile  caniuse    passwordField addEventListener   keydown   function  event       var caps   event getModifierState  amp  amp  event getModifierState   CapsLock       console log  caps       true when you press the keyboard CapsLock key

[javascript] How do you tell if caps lock is on using JavaScript?

Examples related to javascript

Examples related to keyboard

Examples related to capslock