Recommended Input Masking Plugin

Hello, we’ve implemented the value converter to handle some input masking on fields like phones, social security numbers and credit card numbers. It works well with the exception of real time editing from anywhere except the end of the input. What we’ve seen is that some less tech savvy users are sometimes trying to edit from the middle of an input, i.e. changing $100,000 to $155,000 and getting confused when they look up from their keyboard to see the resulting value was something like $1,500,005 because the cursor is displaced during the value conversion.

Is there any recommended plugin anyone has used to handle masking? Or are there plans to bring native support to input masks?

1 Like

@brian, take a look at this simple sample, if it satisfies your need let me know please.

Looks interesting. I’ll give it a shot. It also seems to support dynamic masking changes. For instance, different credit card formats that are contingent on the first few digits. I’ll be sure to report back once I have it fully implemented in all of our custom components :grinning:

I use Aurelia-mask. It works well for me.

1 Like

inputmask I’ve got an aurelia plugin for it. Ping me if interested.

1 Like

@brian I implemented it partially as custom-attribute in aurelia-toolbelt, if you share your implementation with me, that would be a great help, otherwise, I will complete my implementation within next month, since I am now focusing on bootstrap components and their documentation till next week or 10 days.

regards

may I ask you to share your code with us in aurelia-toolbelt?

may I ask you to share a link here? mask input is one of the components I listed in our component-list in aurelia-toolbelt, so if a perfect one exists in Aurelia community we might consider removing it.

Will do. I haven’t gotten to it yet as there are higher priority items I must tackle first (working in a corporate environment). I promise I won’t forget.

1 Like

aurelia-mask is at https://github.com/ariovistus/aurelia-mask.

1 Like

Sure, would you prefer a PR?
The attribute also supports aurelia-materialize-bridge (on a DOM level, no dependencies). Would you like to keep the support?

1 Like

would be great, don’t make haste

thanks Richard, I’ll take a look at it :+1:

@MaximBalaganskiy, no dependencies mean vanillajs :+1:, yeah sure if you could make a PR, we will look at it and that would be great, and may be we can ship a full working masked-input in the toolbelt by its first release. you can find our half-completed masked input here.

It would be awesome if you add your masked implementation there too :pray:

Done. Although, could not build the sample project - don’t have much time to make it work

1 Like

Thanks @MaximBalaganskiy :+1: