Detecting CAPS Lock on PeopleSoft signon page

Many application warn you that CAPS Lock is on when entering case sensitive passwords.  A very useful feature.

We decided it would be nice to have this on our PIA signon page too.

This is done through some simple Javascript code on the signin.html page.

Inert this function (directly or via a linked .js file) into your WEB-INF\psftdocs\[sitename]\signin.html

<script>
function CheckCapsLock(event){
 //identify the ASCII code of which key was pressed
 keyCode = event.keyCode?event.keyCode:event.which;
 
 //Is this shift key on
 shiftKeyOn = event.shiftKey?event.shiftKey:((keyCode == 16)?true:false);

 //If the key pressed is A - Z and the shift key is NOT pressed then CAPS lock must be on.  
 //or If the key pressed is a - z and the shift key IS pressed then CAPS lock must also be on.  
 if(((keyCode >= 65 && keyCode <= 90) && !shiftKeyOn)||((keyCode >= 97 && keyCode <= 122) && shiftKeyOn))
  document.getElementById('oxf_warning').style.visibility = 'visible';
 else
  document.getElementById('oxf_warning').style.visibility = 'hidden';
}
</script>

Then add a call to CheckCapsLock into the INPUT tag for the password field.

Finally, place a "CAPS Lock is on" warning message somewhere on the signon.html page.

Warning - Caps Lock is on

This should work on any PeopleTools release and has been tested on Chrome, FireFox and IE.

Credit to Oxfam Developer Angela McKenna for these code snippets.