Cleave on an HTML Input Field

Support
1

Neil Manchester:
Trying to get v-cleave to work on an input field in an HTML snippet but having no joy. I know cleave.js is part of the BF framework so shouldn’t this work?

<input v-model="lineItem.unitCost" class="lineItem-price fieldLineItem ml-2" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" :class="[model.isLocked || lineItem.flagCommitted ? 'hover:!border-none' : '']" onClick="this.select();" @blur="namedAction('updateLineItem',{index:index,lineItem:lineItem})" :disabled="model.isLocked || lineItem.flagCommitted" v-cleave="{numeral: true,numeralPositiveOnly: true,numeralIntegerScale: 3}"/>

Andrew Dam:
That’s a pretty wild coincidence, I just updated our Cleave example with an HTML input on the bottom. You can check that out.

Andrew Dam:
Gist of it is you give your input a class, and onFormLoad you can select that class and turn it into a cleave field.

Neil Manchester:
Thanks. I’d actually tried that method based on a codepen I found but I get this error

image

Andrew Dam:
Interesting, are you using a different DOM Header insertion for cleave?

Neil Manchester:
Hang on, could have found the issue

Neil Manchester:
Think the issue is I’m trying to use it on multiple fields. Thought that this would be ok with it being a class but looks like that’s not the case

Andrew Dam:
Ah, there’s a method I found on a stack overflow thread that will loop through every field that has that class and turn it into a cleave. Let me find that reference…

Andrew Dam:
Stack Overflow

$('.input-phone').toArray().forEach(function(field) {
    new Cleave(field, {
                "blocks": [0, 3, 0, 3, 4],
                "delimiter": " ",
                "delimiters": ["(", ")", " ", "-", "-"],
                "lowercase": false,
                "numericOnly": true,
                "uppercase": false
            })
});

Neil Manchester:
Nice one! So could this be added to the onAppLoad NA and then be available site wide or do I need to add it to each page?

Andrew Dam:
Good question, technically the element needs to exist before you can convert it. What I did was create a named action with that code, and whenever I would generate a new field, I would call that named action.

Andrew Dam:
I guess in your case, you can have a global named action you can call onFormLoad on whichever pages you would need that particular HTML cleave.

Neil Manchester:
And then again when I add a line item top an invoice and add new fields! That’s great

Neil Manchester:
Also, don’t suppose you know of a way to force 2 decimals even if the user enters one? Trying to get all my currency fields to have 2 decimals, even if someone enters something like 200.5

Andrew Dam:
Not sure off the top of my head, does it need to happen immediately or can you check for it during submission?

Neil Manchester:
Yeah potentially. Problem is, as I’m saving in a number field in FileMaker it then strips off the trailing 0. I’m probably trying to solve a problem that doesn’t really exist!