This article mentions how we can create an input with a custom mask in Code2. E.g., when we enter credit card information or a phone number in input, we want to show or save them in their exact format. If you follow the instructions below, you can also do it quickly in your app.

In this example, we created two inputs. The first one includes the US phone number format and the other consists of the US credit card format as in the image.

Creating a custom mask would help to use javascript in the calculated property.

You must choose the value in ' Property ' and javascript in ' Use 'and write your name of the text field component in ' Recalculate when change.'

In javascript, in the first line, you should write the below code. It checks the value of the text field component comes correctly.

let inputValue = value ? value : ''

Then it would help if you wrote javascript codes about the custom mask, and It changes according to your mask type. You can find the necessary codes on the internet quickly. For US phone numbers, you can write those codes below.


let inputValue = value ? value : ''

let splitedValue = inputValue.replace(/[^0-9]+/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);

return (splitedValue[2] ? '(' + splitedValue[1] + ') ' : splitedValue[1]) + splitedValue[2] + (splitedValue[3] ? '-' : '') + splitedValue[3]

And you can use those codes below for US credit cards.


let inputValue = value ? value : ''

let splitedValue = inputValue.replace(/[^0-9]+/g, '').match(/(\d{0,4})(\d{0,4})(\d{0,4})/);

return splitedValue[1] + (splitedValue[2] ? ' ' : '') + splitedValue[2] + (splitedValue[3] ? ' ' : '') + splitedValue[3]

That's it. Now you can implement it in your project.


Did this answer your question?