jQuery input Mask plugin with strange problem

Asked

Viewed 698 times

1

I have been using this plugin for a long time:

Robinherbots/Inputmask

And this week I made a change in the way I use it, I started calling it that way:

Caller for the input:

var mainValidator = function () {

    var fieldValidation = function () {
        $(document).on('keyup focus', '.input-field', function () {
            var $this = $(this);
            var mask = $this.data('input-mask');
            var type = $this.data('input-type');
            if ($.isEmptyObject(mask)) {
                console.log('no mask');
            } else {
                makeMask(mask, $this);
            }
            if ($.isEmptyObject(mask)) {
                console.log('no type');
            } else {
                var caller = {
                    function: 'make_validation',
                    model: $this.data('input-type')
                };
                $.ajax({
                    type: "POST",
                    url: "callers.php",
                    data: {caller},
                    dataType: 'json',
                    success: function (data)
                    {
                        alert(data);
                    }
                });
            }
        });
    };
    return {

        init: function () {
            fieldValidation();
        }

    };
}();

jQuery(document).ready(function () {
    mainValidator.init();
});

And here an example of the mask application:

var makeMask = function (mask,$this) {
    //E-mail
    if (mask === 'mail') {
        $this.inputmask("email");
    }
}

The problem that’s happening is this:

The mask is placed in the field correctly, however, when typing for example:

[email protected]

the moment the fields of the "@","." mask are pressed, the field does not follow with the fill, that is, if I type:

test (the moment I press@it proceeds, but as soon as I release@it goes back to before), it is always like this:

test(pointer stays here)@ ... '.' ...

To proceed with typing, you need@to press and type the next letter.

The mode that was called before this problem was directly in the input (it was changed because all inputs were generated dynamically):

<input class="input-field" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />

With the jQuery:

$(document).ready(function(){
  $(".input-field").inputmask();
});

I don’t know if this is maybe some bug, or I’ve got a bug form the plugin, what would be a possible solution to this problem ?

javascript jquery input-mask

  • I think it makes it easier to get an answer if you put the way you called it before. So maybe someone who’s already been there so they can see why.

  • Good idea, I’ve put an example of how it was before in my question.

  • Look, a problem similar to yours was fixed by the author of the code in May this year: https://github.com/RobinHerbots/Inputmask/issues/1600 - you have the most current version?

  • I am using the latest not available dev in packagist, but I believe I found the error, it was not in the plugin but in my event that I set the mask, I will do a few more tests, if that is already put the answer.

1 answer

1


Solution:

The problem was this:

The 'keyup' event that instantiated the mask in the input, was responsible for restarting the pointer whenever it was fired, so when it remained tight it proceeded in formatting, the solution was to change the instance trigger to 'focusin'.

Thus remaining:

 $(document).on('focusin', '.input-field', function () {
            var $this = $(this);
            var mask = $this.data('input-mask');
            if (mask === 'undefined') {
                console.log('no-mask');
            } else {
//Método de inserção de mascara
                makeMask(mask, $this);
            }
        });

Browser other questions tagged javascript jquery input-mask

You are not signed in. Login or sign up in order to post.