Set "inputmode" on a currency field to "decimal"?

[richUK]

Is there some way to set the inputmode attribute on a currency/number field? Since this is an html attribute and not CSS am not sure how to attempt it.

Found a possible here:

HTML DOM Element setAttribute() Method

but javascript is not remotely my thing, so applying this to the form elements on the page I’d need some guidance.

Would be very useful since my app is targeted purely at mobile users. In addition I’d love to be able to configure the input so that it is modern style 2 decimal place for currency entry such that:

pressing 1 = 0.01
pressing 11 = 0.11
pressing 111 = 1.11
pressing 1111 = 11.11

etc.

If anyone has any ideas on how to achieve this I’d be super grateful!

Rich.

[richUK]

Found this code re the field formatting, but again no real idea how I’d go about applying it to a target field
on a page:

 if let amountString = textField.text?.currencyInputFormatting() {
        textField.text = amountString
    }
}

extension String {

    // formatting text for currency textField
    func currencyInputFormatting() -> String {

        var number: NSNumber!
        let formatter = NumberFormatter()
        formatter.numberStyle = .currencyAccounting
        formatter.currencySymbol = "$"
        formatter.maximumFractionDigits = 2
        formatter.minimumFractionDigits = 2

        var amountWithPrefix = self

        // remove from String: "$", ".", ","
        let regex = try! NSRegularExpression(pattern: "[^0-9]", options: .caseInsensitive)
        amountWithPrefix = regex.stringByReplacingMatches(in: amountWithPrefix, options: NSRegularExpression.MatchingOptions(rawValue: 0), range: NSMakeRange(0, self.characters.count), withTemplate: "")

        let double = (amountWithPrefix as NSString).doubleValue
        number = NSNumber(value: (double / 100))

        // if first number is 0 or all numbers were deleted
        guard number != 0 as NSNumber else {
            return ""
        }

        return formatter.string(from: number)!
    }
}

Any ideas or help would be much loved.

[moe]

Hi Rich,

I think i have a simpler solution. The only technical thing required on your part will be to find the ID of the currency field.

1. Copy paste this code into the footer of the site:
   <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>

2. Find the ID of the field you wish to use:
   

   

3. Add the following code to the Javascript of the page, be sure to change the field ID to the ID from step 2.

   var flag = false;
   function checkFlag() {
   if(flag === false) {
   if ($(’#field0DzjGaNYp1’).html() !== undefined) {
   flag = true;
   }
   window.setTimeout(checkFlag, 100);
   } else {
   var im = new Inputmask(‘99.99’);
   im.mask($(’#field0DzjGaNYp1’));

   }
   }
   checkFlag();

Final outcome:

There are many customizalbe options you can choose from:

RobinHerbots/Inputmask

Let me know if I can assist further with this.

Happy building!

[richUK]

Thanks Moe. I’m trying to work this out, but it looks like I need something to do this that updates the HTML element as well as the Java.

See the stackoverflow post solution:

Right to Left input mask

This is all a bit beyond me but happy to experiment, but seems I need to be able to add HTML elements to affect the field to identify the direction as “Right to Left (RTL)” and also to set the input type so that the virtual keyboard calls the numberpad in the first instance.

Anything you can do to guide me on this?

Thanks heaps!

[richUK]

Sussed it.

In case anyone else wants it the code I used was:

var im = new Inputmask(“numeric”, {
numericInput: true,
placeholder: ‘0’,
groupSeparator: ‘,’,
autoGroup: true,
rightAlign: false
});
im.mask($(‘#fieldDVWQWRRNZ4’));

}
}
checkFlag();

[Chem]

Hey all,

This keeps on coming up in support so I’m just going to leave this reply with simple, clear, and clean instructions that also uses the Tadabase JavaScript API (now that this is an option).

Here’s a working demo you can check out.
https://tutorials.tadabase.io/input-mask/demo
Please note that I’ve tested this with a Text Field and Currency field. The number field seems to override the input mask and will not work at the time of writing this.

1. 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>
   
   
2. 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.
   
   
3. 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.
   
   
4. Copy and paste the following code into the JavaScript section of your page.
   Click the link below for the code
   https://8232-application-data-2273.s3.amazonaws.com/blNewBOjxw/1619201955-input-mask-javascript.txt
   
   

[Chem]

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":"\\"
    });
});

[Chem]

An additional configuration you can do is to use a comma as the decimal separator instead of a period as shown here: https://tutorials.tadabase.io/input-mask/comma-as-decimal-separator

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 Configuration (remember to change ‘component_ID’ to your component ID

TB.render('component_ID', function(data){
    data.ele.find('.my-input-mask input').inputmask('numeric', {
        'radixPoint': ',',
        'groupSeparator': '.',
        'autoUnmask': true,
        'rightAlign': false,
        'unmaskAsNumber': true,
        'autoGroup': true,
        'digits': 2,
        'digitsOptional': false,
        'placeholder': '0,00'
    });
});

[james]

@Chem

Is there a way to set this up at the Layout level so that it works for every field that you assign the class “my-input-mask” to?

[slimpens]

@Chem

Great solution, but unfortunately the validation rules don’t work when configuring this.
E.g. I have a currency input, but the minumum value needs to be 250.000.
When I configure my input form like this, and I submit a number of 350.000 and press submit, the validation rule kicks in and shows the message that the value needs to be at least 250.000.

[Chem]

Hey @slimpens, this kind of validation rule worked for me while using an input mask. Please see the following video and let me know if I’m missing something.

Thanks!

[slimpens]

@Chem:

I currently combined the Javascript math function and & the decimal separator.Please have a look at the screenshot.
However, when I combine both Javascript snippets, the calculation doesn’t work

[slimpens]

@Chem

Is it not possible to combine the 2 functions? (Math function and showing the results with a thousand separator and EURO sign?

[Chem]

@slimpens here’s how you can combine the two.

TB.render('component_ID',function(data){
    var calculateAndUpdateDom = function(){
        var amountInput = $('.amount input').val();
        var quantityAmount = $('.quantity input').val();
        var calc = amountInput * quantityAmount;
        $('#total').html('€'+Number(calc).toLocaleString("es-ES", {minimumFractionDigits: 2}));
    };
    $('.math-input').keyup(function(){
        calculateAndUpdateDom();
    });
    data.ele.find('.eu-thousands-place-currency input').inputmask('numeric', {
        'radixPoint': ',',
        'groupSeparator': '.',
        'autoUnmask': true,
        'rightAlign': false,
        'unmaskAsNumber': true,
        'autoGroup': true,
        'digits': 2,
        'digitsOptional': false,
        'placeholder': '0,00'
    });
});