jQuery маска ввода не работает при повторном вводе
Я боролся с этим в течение довольно долгого времени и не могу заставить это работать.
Я использую 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'));
}
};
Есть идеи, как заставить это работать? Благодарю.