Labelmask was inspired by Filament Group's Politespace plugin and it enhances its codebase to modify some accessibility, copy-pasting, auto-filling, and UX problems.
Unlike similar plugins that completely transform the data inputting experience by adding an interactive mask filter inside the input itself, Labelmask works by removing the input mask completely.
The input mask is shown only when the form field is not filled with data as a text-based placeholder, but when the user starts typing inside the field, the input mask text is moved next to the form field's label outside of the input element.
As the user types, text is displayed normally inside the field, without any filtering or character insertions. At the same time the input mask is also updated in real-time outside of the input field, letting the user know how many characters he has left from the original mask and what he has already typed in.
When the data has been entered and the user focuses off the field, the input mask is then re-applied to the inputted text, making it easier to read.
A demo is included with the download package.
Requirements:
- JavaScript enabled on client side
- jQuery
Comments not found