New video tutorial on how to set up and use the new input formatter element that’s available in the Toolit Kit plugin
This new format allows advanced custom formatting of input fields compared to other plugins that are available in the plugin store. The two areas that make this a better choice are
Custom options that are inline with cleave.js
More robust code that allows inputs to be formatted even when the element is not yet available on the page. For example when used in a hidden group or reusable element. The plugin actually watches the DOM for the element until it appears. So fewer errors .
@AliFarahat I am curious if there may be a way to fix a couple of issues I am having with the plugin or the input element
When a user clicks into the input element the first time, the prefix becomes visible as expected, however, if the user clicks into the input element and doesn’t enter any characters and then clicks out of the input, the prefix is removed from site and a place holder becomes visible instead.
When the placeholder is visible and not the prefix, as the user clicks into the input element again, a dropdown pre-selection comes up that really has nothing to do with the type of input as far as I can tell. Is there a way to stop the pre-selection dropdown from showing?
When the prefix is not visible because of what is described in question 1 above, in order for the prefix to become visible again, the user has to enter a character, such as a number or letter, for the prefix to become visible, however, the typed character is not actually present. Is there a way, if question 1 is not possible to be resolved, to make it so that when the input is focused again the prefix becomes visible again and no characters are required to be entered for the prefix to be visible?
When a user selects the entire input value, which includes the prefix, and then deletes, nothing happens, however if they only select the characters inputted after the prefix the characters are deleted. Is there a way to make it so the characters entered after the prefix are deleted when the user selects the entire input value including prefix and then only the prefix would remain?
I’m using your plugin to change the currency input format. At the moment the bubble currency input only has the following format: €1,600.50. The euro currency in France, Belgium and other countries should be shown like this: € 1.600,50 (inverted , and .). I managed to do it with your plugin but I’m having difficulties with the output.
I need the output as a number (eg. 1600.50) but if I choose output number I only get 1 while if I choose the raw value I get the right number but it’s in text.
Well if you can copy the options and past here that would help alot. I also noticed you set the input as an integer. It should be text. Can you try that first
Hi @AliFarahat, I was wondering if you can help me with this. In am using your Input Formatter plugin in order to overcome the standard input limitation on European number formatting. We use a . delimiter for thousands and a , delimiter for decimals. As shown in the following image, there is an input (formatted as text, but I also tried with decimals or integer) and the formatter referred to this input ID. In the formatter options the json (taken from the cleave.js project) is this
The input per se works fine. But for some reason the Input Formatter results ignore the decimals. This means that when I save the input via the formatter, the number is wrong because the lack of decimals. There is also another issue: when you type more then 6 digits the results are changing in a quite weird way (typing the 7th digit, results show 4 digits only and then again on multiple of 6).
Since I just started a kind of accounting project, this feature is absolutely essential to the all project and I must absolutely rely on it. Can you please take a look at this ? I really appreciate your help.
Just a quick note: it doesn’t seem to work with text (numbers only), couldn’t figure out why at first. I used integer instead and it works like a charm
The short answer is no. But then again, i never really tested it. Are you looking to make the ID as dynamic. I can certainly convert that for you so you can try it.
@AliFarahat well this is quite important when working with repeating groups - which in my case is mass data upload where I want to make sure that all fields are nice & clean.
So what I need is the capability to fill the ID dynamically so each table row gets it’s own verification. If you can provide something for testing I will gladly check it.
There is also one additional plugin called Input Mask 2.0 which does support dynamic ID but it’s a bit unstable and doesn’t work at all when used togheter with hidden element.
I tested the plugin but it doesn’t seem to work properly and it’s copying the data across each input within the given column. So it “feels” like it doesn’t verify the dynamic value properly
Dear AliFarahat,
Thanks For this very relevant content. However I can’t get use the Input Formatter in a PopUp’s field. Could you help me on this matter?
.
.