Использование jQuery Mask Plugin для динамического значения - PullRequest
Новая
       33

Использование jQuery Mask Plugin для динамического значения

0 голосов
/ 07 марта 2019

Я пытаюсь использовать jQuery-Mask-Plugin на входе, значение которого может быть динамическим.Этим вводом может быть любое число, по крайней мере, от 2 цифр до максимум 8 цифр, и маска - «-».Например, у меня может быть «2-2», «45 -8» или «9999999-8» и т. Д.

Проблема в том, что маска не работает вообще.Мне удалось заставить его работать, используя $("#input-area input").mask("00-0");, но моя маска не была динамической.

Вот что я пытался сделать: 

var options = {
    onKeyPress: function (conta, ev, el, op) {
        var masks = ['0-0', '00-0', '000-0', '0000-0', '00000-0', '000000-0', '0000000-0', '0000000-0'];
        if(conta.length == 2){
            var mask = masks[0];
        } else if(conta.length == 3){
            var mask = masks[1];
        } else if(conta.length == 4){
            var mask = masks[2];
        } else if(conta.length == 5){
            var mask = masks[3];
        } else if(conta.length == 6){
            var mask = masks[4];
        } else if(conta.length == 7){
            var mask = masks[5];
        } else if(conta.length == 8){
            var mask = masks[7];
        }
        $('#input-area input').mask(mask, options);
    }
}
if($('#input-area > div > input').length == 2){
          $('#input-area > div > input').mask('0-0', options);
} else if($('#input-area > div > input').length == 3){
        $('#input-area > div > input').mask('00-0', options);
} else if($('#input-area > div > input').length == 4){
        $('#input-area > div > input').mask('000-0', options);
} else if($('#input-area > div > input').length == 5){
        $('#input-area > div > input').mask('0000-0', options);
} else if($('#input-area > div > input').length == 6){
        $('#input-area > div > input').mask('00000-0', options);
} else if($('#input-area > div > input').length == 7){
        $('#input-area > div > input').mask('000000-0', options);
} else if($('#input-area > div > input').length == 8){
        $('#input-area > div > input').mask('0000000-0', options);
}

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Поиск немного дальше в документах Плагин Jquery Mask Я нашел Рекурсивные цифры .Это будет что-то вроде: $('#input-area > div > input').mask('##0-0', {reverse: true});

0 голосов
/ 07 марта 2019

Несколько вещей здесь не так

  • Прежде всего, и наиболее очевидным является то, что вы запускаете mask перед загрузкой ввода в DOM.Сначала загрузите input, затем mask
  • Вам не хватает кода: Где находится event, который загружает динамический ввод?
  • Вы загружаете onKeyPress в опциях?

Возможно, вы захотите структурировать свой jquery следующим образом:

HTML

Однако ваш keypress выполнен (событие click)), сделайте так, чтобы оно передавало значение длины.Как правило, предварительно загрузите динамически data-id в кнопку.В моем примере это 2

<button class="loadinput" data-id="2">Click</button>

<div id="input-area"><div></div></div>

JQUERY

Затем в jquery сначала загрузите вход, затем загрузите mask

$(document).on('click', '.loadinput', function() {
    var this_length = $(this).attr('data-id');
    $('#input-area > div').html('<input id="thisinput" type="text">');
    if (this_length == 2) {
        $('#thisinput').mask('0-0');
    } else if (this_length == 3) {
        $('#thisinput').mask('00-0')
    }...and so on
})
...