estelle / input-masking

Framework agnostic accessible input masking library
MIT License
485 stars 96 forks source link

Autofill Special Characters #27

Open Auer111 opened 3 years ago

Auer111 commented 3 years ago

After some testing I found some users found it unintuitive to only type numbers for masked dates. (they would try to type in the slashes). If there is some functionality I didn't understand that supports this in the docs let me know, otherwise I found this solution.

inside of handleCurrentValue after the for loop add

if (value.length < l) { if (placeholder[value.length].match(/\W/)) { newValue += placeholder[value.length]; } }

Example: 12/25 -> 12/25/

Auer111 commented 3 years ago

Found the solution above was a bit limiting so here is a new version with support for things like

XXABC-XXX

in handleCurrentValue var isCharsetPresent = e.target.getAttribute('data-charset'), placeholder = isCharsetPresent || e.target.getAttribute('data-placeholder'), value = e.target.value, l = placeholder.length, newValue = '', i, j, isInt, isLetter, strippedValue, regNot = new RegExp("[^"+this.opts.mNum+this.opts.mChar+"]");

and after the for loop if (newValue.length >= value.length) { for (i = newValue.length; i < l; i++) { if (placeholder[i].match(regNot)) { newValue += placeholder[i]; } else { break; } } }

cepm-nate commented 3 years ago

This helped, thanks!