Mask a field

API & Customization Ask Developers
1

Hello,

Does anyone know how to mask a field when entering the data like in the picture I attach?

Thanks in advance.

NG.

2

Thanks a lot Brad for the information.

Let´s see if I can do something.

NG.

3

Not a coder either - MS Access VBA self taught here but trial and error in Knack and using a test app along with Chrome Inspector you might be surprised how far you get.

A quick search of Stackoverflow (where all the good JavaScript and CSS Q&As are) brings up this sort of thing http://stackoverflow.com/questions/7952262/jquery-input-mask which looks like it needs an external library load (in Knack that'd be a LazyLoad - see http://helpdesk.knackhq.com/support/solutions/articles/5000447139-customization-with-jquery-and-javascript#load).

Again I reckon it'd be easier in the short term to use the non-coding methods - not perfect from a UI point of view but will work, and then you won't be slowed by a roadblock in getting the app functional.

4

Hi Brad,

Thanks for your tip but I´m not a code guy so do that is really kind of difficult for me ;)

It would be nice to have some piece of code we can modify to fit our needs.

But thanks anyway.

NG.

5

NG - only way I think you'd get it to work is through javascript, either through loading an external library or building you're own input mask function, then calling that on view render and keypress in the field.

Probably easier right now might be to use the new Validation rules.

6

Hi Josh,

Thanks for the tip but it´s not working, I´m getting all the time this error: 

Uncaught SyntaxError: Unexpected token ILLEGAL

Sorry maybe I did not explain myself well, what I was looking for is to mask the input of a field, to enter the bank account number that right in the field the user just enters the numbers and the field automatically gets something like: 9999-9999-9999-9999

I´m attaching a video so you can see it.

Thanks a lot for your time Josh.

Hope you can get this work ;)

NG.

7

Let me know if this works. You would need to change the part that says "field_1" to whatever your field ID is. In order to find this #, go into builder, click Fields under that object, and then click on your field. You will see the field # added to the end of the URL in your browser bar. Let me know if you need any extra help!

#kn-input-field_1
{   
    border: #0080FF;
    border-style: solid;
    border-width: 3px;
    padding: 10px;
}