重复输入时,jQuery输入掩码不起作用

时间:2018-07-22 21:02:49

标签: javascript jquery jquery-inputmask

在战斗了很长时间之后,似乎无法正常工作。

我正在使用jQuery-inputmask(https://github.com/RobinHerbots/jquery.inputmask)将输入字段格式设置为货币,这在引导模式加载时效果很好。

但是,我也使用jquery.repeater(https://github.com/DubFriend/jquery.repeater)来复制此字段和其他字段。当字段重复时,输入掩码不再起作用,但是当我检查元素时,可以看到输入掩码已附加。这适用于所有面具都是货币的情况。

我尝试在输入蒙版上使用remove,然后再将其重新添加到重复蒙版上,但这似乎不起作用。

如果在重复表单后从控制台触发_handleInputMasks(),则它将起作用。因此,甚至尝试将其置于中继器的“就绪”功能中,但仍然一无所获。

带有中继器的表格:

    <div class="mt-repeater" data-empty="false">
        <div data-repeater-list="{{ $icp['numberField'] }}">
            <div data-repeater-item="" class="row">
                <div class="col-md-12">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">ICP:</label>
                            <p class="form-control-static input-lg">
                                [{{ $icp['contractName'] }}] <a href="/icp/{{ $icp['number'] }}/review/active" class="popout">{{ $icp['number'] }}</a><br>
                                <span class="input-sm">{{ $icp['address'] }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Total<span class="required">*</span>:</label>
                            <div class="input-group input-icon right">
                                <span class="input-group-addon">
                                    <i class="fas fa-dollar-sign"></i>
                                </span>
                                <i class="fa"></i>
                                <input name="{{ $icp['numberField'] }}_total" id="{{ $icp['numberField'] }}_total" class="form-control inputMask icpTotal" data-mask="currency" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <a href="javascript:;" class="btn btn-default margin-top-20 repeatBtn" title="Duplicate Row">
                            <i class="fas fa-copy"></i>
                        </a>
                        <a href="javascript:;" data-repeater-delete class="btn btn-default margin-top-20 margin-left-20" title="Delete Row">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                    <div class="clearfix"></div>
                    <hr>
                </div>
            </div>
        </div>
        <hr>
        <a href="javascript:;" data-repeater-create="" class="btn mt-repeater-add hide"></a>
    </div>

中继器JS:

var _formRepeater = function(){
        $('.mt-repeater:not(".repeated")').each(function(){
            var empty = $(this).attr('data-empty');
            $(this).repeater({
                show: function () {
                    $(this).find('.select2-container').remove();
                    $(this).find('.inputMask').each(function(){
                        $(this).removeClass('inputmask');
                        $(this).attr('inputmask', 'currency');
                        _handleInputMasks($(this), );
                    });
                    _timepicker();
                    App.init();
                    $(this).slideDown();
                    if ( typeof IcpBuild !== "undefined") {
                        IcpBuild.getMeters();
                    }
                },

                hide: function (deleteElement) {
                    if(confirm('Are you sure you want to delete this element?')) {
                        $(this).slideUp(deleteElement);
                    }
                },

                ready: function (setIndexes) {
                    console.log('fired');
                    $(this).find('.inputMask').each(function(){
                        $(this).inputmask("remove");
                        _handleInputMasks($(this));
                    });
                },
                isFirstItemUndeletable: true,
                initEmpty: (typeof empty == 'undefined')? true : empty
            });
            $(this).addClass('repeated');
        });
    };

Inputmask js:

var _handleInputMasks = function(input = 'all'){

    var __makeMask = function(input, mask){
        var start, end;
        switch(mask){
            case 'date':
                start = input.attr('date-startDate');
                if(start == ''){ start = 'Beginning of time'; }
                end = input.attr('date-endDate');
                if(end == ''){ start = 'End of time'; }
                input.inputmask("dd/mm/yyyy", {
                    autoUnmask: true,
                    "placeholder": "dd/mm/yyyy"
                }).datepicker({
                    rtl: App.isRTL(),
                    orientation: "left",
                    autoclose: true,
                    format: 'dd/mm/yyyy',
                    startDate: start,
                    endDate: end
                });

                input.parents('div.input-group').find('button.btn').on('click', function(){
                    input.datepicker('show');
                    return false;
                });
                break;
            case 'date-month':
                start = input.attr('date-startDate');
                if(start == ''){ start = 'Beginning of time'; }
                end = input.attr('date-endDate');
                if(end == ''){ start = 'End of time'; }
                input.inputmask("mm/yyyy", {
                    autoUnmask: true,
                    "placeholder": "mm/yyyy"
                }).datepicker({
                    rtl: App.isRTL(),
                    orientation: "left",
                    autoclose: true,
                    format: 'mm/yyyy',
                    startDate: start,
                    endDate: end,
                    startView: 'months', 
                    minViewMode: 'months'
                });

                input.parents('div.input-group').find('button.btn').on('click', function(){
                    input.datepicker('show');
                    return false;
                });
                break;
            case 'number':
                input.inputmask(
                    'Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,5})?$"
                }); // ~ mask "9" or mask "99" or ... mask "9999999999"
                break;
            case 'registryCode':
                input.inputmask(
                    'Regex', {regex: "^[0-9,a-z,A-Z]{4}?$"
                }); 
                break;
            case 'currency':
                input.inputmask("numeric", {
                    radixPoint: ".",
                    groupSeparator: ",",
                    digits: 2,
                    autoGroup: true,
                    rightAlign: false,
                });
                break;
            case 'percentage':
                input.inputmask("percentage", {
                    radixPoint: ".",
                    digits: 0,
                    autoGroup: true,
                    allowMinus: false,
                    suffix: ''
                });
                break;
            case 'rate':
                input.inputmask(
                    'Regex', { regex: "^-?[0-9]{1,6}(\\.\\d{1,5})?$"
                }); // ~ mask "9" or mask "99" or ... mask "9999999999"
                break;
            case 'ICP':
                input.inputmask(
                    //"mask": "999999999*-*****",
                    'Regex', { regex: "^(([0-9]{9}[A-Z0-9]?)(-?))?([A-Z0-9]{4,5})$"
                }).addClass('uppercase');
                break;
            case 'gstno':
                input.inputmask({
                    "mask": "[9]9{1,2}-9{2,3}-9{2,3}",
                    placeholder: ""
                });
                break;
            case 'latitude':
                input.inputmask(
                    'Regex', {regex: "^([\-0-9]{1,3}).(\\.\\d{1,8})?$"
                });
                break;
            case 'url':
                input.focusout(function(){
                    if ($(this).val() && !$(this).val().match(/^http([s]?):\/\/.*/)) {
                        $(this).val('http://' + $(this).val());
                    }
                });
                break;
            default:
                //start = input.attr('date-startDate');
                //end = input.attr('date-endDate');
                start = input.attr('date-startDate') == ''? 'Beginning of time' : input.attr('date-startDate');
                end = input.attr('date-startDate') == ''? 'End of time' : input.attr('date-endDate');

                //if(start == ''){ start = 'Beginning of time'; }

                //if(end == ''){ start = 'End of time'; }

                if(mask == 'daterange'){
                    input.datepicker({
                        rtl: App.isRTL(),
                        orientation: "left",
                        autoclose: true,
                        format: 'dd/mm/yyyy',
                        startDate: start,
                        endDate: end
                    });
                } else {
                    input.datepicker({
                        rtl: App.isRTL(),
                        orientation: "left",
                        autoclose: true,
                        format: 'mm/yyyy',
                        startView: 'months', 
                        minViewMode: 'months',
                        startDate: start,
                        endDate: end
                    });
                }

                var fromDate = input.find('input:eq(0)');
                var toDate = input.find('input:eq(1)');

                //Set Initial Dates
                fromDate.datepicker('setDate', new Date(fromDate.attr('data-set-date')));
                fromDate.datepicker('update');
                toDate.datepicker('setDate', new Date(new Date().setDate(new Date().getDate()-1)));
                toDate.datepicker('update');

                fromDate.on('changeDate', function (selected) {
                    var startDate = new Date(selected.date.valueOf());
                    toDate.datepicker('setStartDate', startDate);
                }).on('clearDate', function (selected) {
                    toDate.datepicker('setStartDate', null);
                });

                toDate.on('changeDate', function (selected) {
                    var endDate = new Date(selected.date.valueOf());
                    fromDate.datepicker('setEndDate', endDate);
                }).on('clearDate', function (selected) {
                    fromDate.datepicker('setEndDate', null);
                });
        }
    };

    if(input == 'all'){
        $('.inputMask').each(function(){
            __makeMask($(this), $(this).attr('data-mask'));
        });
    } else {
        __makeMask(input, input.attr('data-mask'));
    }
};

任何想法如何使它起作用?谢谢。

0 个答案:

没有答案