⚡️Pin entry fields, keylogging, security and a DOM solution

I looked over the wireframes of a new project today and discovered a weird one for the use case of entering a PIN number: The client defined a keypad like you would see on a cash machine, and requested that the user should enter the PIN thus – via the mouse.

The accessibility militia member in me started to frown upon this, considering that a password field is a lot easier to use and wondered if that is a marketing
gimmick.

However, upon reading further into the requirements, I realised that it is a security measure to prevent keylogging software to store the pins users enter in the application.

However, I don’t think that there is a truly accessible solution for that problem, as you will need JavaScript to change a field’s value when clicking other buttons – unless you want to reload on every button click.

I came up with a DOMscripting solution for the problem, check the test page for DOMpinpad here and wondered if there are more options to improve this.

Currently the pad

• only applies itself when DOM is supported and JavaScript is available
• renders the PIN field readonly and greyed out only when the pad can be used
• can be used with a keyboard and tabbing and with the mouse (is there a safety hazard in the tabbing ability? Wouldn’t that be trackable, too?)
• is self contained, as in plays well with other scripts
• is styleable via CSS

I tested it on MSIE 6,Firefox and Opera on PC and Safari on Mac, please report any problems you may encounter.

If this one is considered a worthy solution, I will wrap it up and release the code at a later stage.