可以利用AngularJS directive和正则表达式来实现右向填充并可选3个小时数字的时间输入掩码。
以下是一个示例的代码解决方案:
HTML:
AngularJS Directive:
app.directive('timeInputMask', function() {
return {
require: '?ngModel',
link: function(scope, element, attrs, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function(inputValue) {
var digits = inputValue.replace(/[^0-9]/g, '');
var hours = digits.substr(0, digits.length - 4);
var minutes = digits.substr(-4, 2);
var seconds = digits.substr(-2);
if (digits.length > 5) {
ctrl.$setViewValue(hours.padStart(2, '0') + ':' + minutes.padStart(2, '0') + ':' + seconds.padStart(2, '0'));
} else if (digits.length > 2) {
ctrl.$setViewValue(hours.padStart(2, '0') + ':' + minutes.padStart(2, '0'));
}
ctrl.$render();
return hours + minutes + seconds;
});
}
};
});
这个指令可以将输入的时间字符串按照格式 hh:mm:ss 或 hh:mm 的形式进行显示,并保证了右向填充和可选3个小时数字的要求。同时,如果用户在输入框中输入非数字字符,这些字符将被忽略,只有数字字符会被进行格式化。