1

Venho utilizando esse plugin a um bom tempo:

RobinHerbots/Inputmask

E essa semana fiz uma mudança na forma como utilizo ele, passei a chamar dessa forma:

O Caller para o 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();
});

E aqui um exemplo da aplicação da máscara:

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

O problema que está acontecendo é o seguinte:

A máscara é colocada no campo corretamente, porém, quando está digitando por exemplo:

[email protected]

no momento em que os campos da máscara "@","." são pressionado, o campo não segue com o preenchimento, ou seja, se eu digito:

teste (no momento que aperto o '@' ele prossegue, mas assim que o solto o '@' ele volta para antes), ficando sempre assim:

teste(ponteiro fica aqui)@ ... '.' ...

Para prosseguir na digitação, precisa que o '@' fique pressionado e se digite a próxima letra.

O modo que era chamado antes desse problema era diretamente no input (foi alterado pois os inputs passaram a ser gerados todos dinamicamente):

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

Com o jQuery:

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

Não sei se isso talvez seja algum bug, ou desconfigurei de alguma forma o plugin, qual seria uma possível solução pra este problema ?

4
  • Acho que fica mais fácil conseguir uma resposta se você colocar a forma como chamava antes. Assim talvez alguém que já tenha passado por isso consiga ver o motivo desse comportamento. Commented 31/07/2017 às 19:19
  • Boa ideia, já coloquei um exemplo de como estava antes na minha pergunta. Commented 31/07/2017 às 19:26
  • Olha, um problema parecido com o seu foi corrigido pelo autor do código em Maio deste ano: github.com/RobinHerbots/Inputmask/issues/1600 - você está com a versão mais atual? Commented 1/08/2017 às 11:23
  • Estou usando a mais recente não dev disponível no packagist, mas eu acredito que encontrei o erro, não era no plugin e sim no meu evento que setava a mascara, vou fazer mais uns teste, se for isso mesmo já posto a resposta. Commented 1/08/2017 às 11:32

1 Resposta 1

1

Solução:

O problema era o seguinte:

O evento 'keyup' que instanciava a mascara no input, era o responsável por reiniciar o ponteiro sempre que ele era disparado, por isso, quando permanecia apertado ele prosseguia na formatação, a solução foi mudar o disparador de instância para 'focusin'.

Ficando assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .