How to create input mask

heruprambadi · October 20, 2023, 9:25am

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

It works with normal form, but it doesn’t work with master detail form. I can’t find event for master detail form.

johnny · October 21, 2023, 10:26am

I don’t understand what is your question to be honest. Would you like to trigger this event but for detailed/master form?

Regards
Johnny

heruprambadi · October 21, 2023, 11:16am

Hello john. I want to create javascript input mask like this Edit fiddle - JSFiddle - Code Playground
How to create it in gc ? I try like this article JavaScript Events | Grocery CRUD v3 but doesn’t work.

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

johnny · October 23, 2023, 5:31am

Hello @heruprambadi ,

You will need to:

Enable the “publish_events” from configuration to true
Use callbackAddField | Grocery CRUD v3 and callbackEditField | Grocery CRUD v3 for your input and make sure that the input
Use the events ‘gcrud.form.add-load’ ‘gcrud.form.edit-load’. For example:

window.addEventListener('gcrud.form.add-load', ({detail}) => {
    // Your custom JavaScript here
});

I hope this helped.

Regards
Johnny

heruprambadi · October 23, 2023, 7:43am

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>