在战斗了很长时间之后,似乎无法正常工作。
我正在使用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'));
}
};
任何想法如何使它起作用?谢谢。