How to create input mask

Hello.
How to add input mask like this ?
I readed the documentation and found this.

image1095×522 20.8 KB

Hello john. I want to create javascript input mask like this JSFiddle - React, Tailwind, and code Playground
How to create it in gc ? I try like this article JavaScript Events | Grocery CRUD - A PHP CRUD Generator Library but doesn’t work.

Anyway, you can click on word “this” in my question above

Thx @johnny now i’m able to do it. I need this event “gcrud.form.add-load” to make it work.
I hope future GCE have feature like money input mask, because some user type 1.000.000, another user type 1,000,000, and the other type 1000000. We need to make standart for it.

For you who expriencing similar problem with me, i’m just gonna put it here, in case you need it.

callback add field in controller :

        $crud->callbackAddField('nama', function ($fieldType, $fieldName) {
            return '<input type="text" name ="nama" class = "myForm">';
        });

script in view file :

<script>
    window.addEventListener('gcrud.form.add-load', ({
        detail
    }) => {
        let input = document.getElementsByClassName("myForm");

        console.log(input.length);

        for (var i = 0; i < input.length; i++) {
            input[i].addEventListener("keyup", (e) => {
                formatCurrency(e.target);
            });
            input[i].addEventListener("keypress", (e) => {
                formatCurrency(e.target);
            });
        }

        function formatNumber(n) {
            // format number 1234567,89 to 1 234 567,89
            return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        }

        function formatCurrency(input) {
            var input_val = input.value;
            if (input_val === "") {
                return;
            }
            var original_len = input_val.length;
            var caret_pos = input.selectionStart;
            input_val = formatNumber(input_val);
            input.value = input_val;
            var updated_len = input_val.length;
            caret_pos = updated_len - original_len + caret_pos;
            input.setSelectionRange(caret_pos, caret_pos);
        }
    });
</script>

i’m sorry @johnny , it works for normal form, but still doesn’t work for master detail form

@johnny it doesn’t work if we use it on master detail :

image1296×556 30.7 KB

But if we open master detail link directly, it works.

image1162×450 13.8 KB

Ok @johnny , i’ll wait for the next version. Thank’s.

Hello @johnny , i confirm this not work with the latest version of GCE (V3.1.4). I just update my GCE using “composer update --prefer-dist” and my input mask not working anymore. I try to replace my GCE with the old one, and it working again. Any solution for this ?

Before update, the publish_events is true. So after update, it still true.

image370×150 4.54 KB

I dont know what’s the problem, but after update, my input mask does not work anymore.

image813×259 3.67 KB

And after i replace GCE file in vendor folder, it works.

image764×252 7.54 KB