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
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.
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
- 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.