jQuery plugin input mask with strange problem

Question

jQuery plugin input mask with strange problem

Navigation

#1 by (1 votes)

1

I've been using this plugin for quite some time:

RobinHerbots / Inputmask

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

The Caller for 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();
});

Here is an example of the mask application:

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

The problem that is happening is as follows:

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

[email protected]

at the time the mask fields "@", "." are pressed, the field does not follow with the padding, ie if I type:

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

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

To continue typing, you need to '@' be pressed and enter the next letter.

The mode that was called before this problem was directly in the input (it was changed since the inputs started to be generated all dynamically):

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

With jQuery:

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

I do not know if this is maybe a bug, or I misconceived some form the plugin, what would be a possible solution to this problem?

javascript jquery input-mask

asked by anonymous 31.07.2017 / 21:16

1 answer

XML Serialization, how to do How to save a foreign key in laravel 5.3?

score 1 · Accepted Answer

Solution:

The problem was this:

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

Looking like this:

 $(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);
            }
        });