Chem
July 13, 2021, 6:34pm
7
I want to add how to use the escapeChar option.
Let’s say, for example, you want the phone number to have a prefix (0197) that is uneditable, and then the user can enter the rest of the number following a specific number pattern (99 999 999 9).
Working Demo: https://tutorials.tadabase.io/input-mask/demo-phone-number
To do this, you can follow steps 1, 2, and 3 above and then add the following code to the JavaScript.
Click here to see steps 1, 2, and 3 from the post above
Chem:
Add the CDN to the Custom Footer Code found in the Tadabase Settings > Custom Header/Footer Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>
Add the text my-input-mask to the CSS Class option in Design when editing the Field in the form component, as shown in the image below.
Find the Form’s Component ID by hovering over the info icon on the Page Builder. In my case, this is component_3 , so I’ll be using that in the code in step 4. This will very likely be different for your form, so please make sure to update component_3 to your form components ID in the next step .
Javascript Code
TB.render('component_3', function(data){
data.ele.find('.my-input-mask input').inputmask("\\0\\1\\9\\7 99 999 999 9",{
"escapeChar":"\\"
});
});
2 Likes