javascript_mask.ts

export function doInputMask(value: string, pattern: string, placeholder?: string) {
	const strippedValue = value.replace(/[^0-9]/g, '');
	const chars = strippedValue.split('');
	let count = 0;
	let formatted = '';
	for (let id = 0; id < pattern.length; id += 1) {
		const item = pattern[id];
		if (chars[count]) {
			if (/\*/.test(item)) {
				formatted += chars[count];
				count++;
			} else {
				formatted += item;
			}
		} else if (placeholder) {
			const placeholderChars = placeholder.split('');
			if (placeholderChars[id]) {
				formatted += placeholderChars[id];
			}
		}
	}
	return formatted;
}

export function inputMaskByEl(inputElement: HTMLInputElement, {
	format,
	placeholder
} : {
	format: string;
	placeholder?: string;
}) {
	const val = doInputMask(inputElement.value, format);
	inputElement.value = doInputMask(inputElement.value, format, placeholder);
	if ((inputElement as any).createTextRange) {
		const range = (inputElement as any).createTextRange();
		range.move('character', val.length);
		range.select();
	} else if (inputElement.selectionStart) {
		inputElement.focus();
		inputElement.setSelectionRange(val.length, val.length);
	}
}

export function inputMasksByEl(inputElement: HTMLInputElement, {
	format,
	placeholder,
	splitChar = ', '
}: {
	format: string;
	placeholder?: string;
	splitChar?: string;
}) {
	const formatList = format.split(splitChar);
	const lowerFormat = formatList.reduce((a, b) => a.length <= b.length ? a : b);
	const higherFormat = formatList.reduce((a, b) => a.length >= b.length ? a : b);
	inputElement.maxLength = higherFormat.length;
	formatList.forEach((formatItem) => {
		if (inputElement.value.length <= lowerFormat.length) {
			inputMaskByEl(inputElement, { format: lowerFormat, placeholder });
		} else if (formatItem.length > lowerFormat.length) {
			inputMaskByEl(inputElement, { format: formatItem, placeholder });
		}
	});
}

export function registerMaskKeyUpEventByEl(inputElement: HTMLInputElement, {
	format: $format,
	placeholder: $placeholder,
	splitChar: $splitChar = ', '
}: {
	format: string,
	placeholder?: string,
	splitChar?: string,
}) {
	const format = inputElement.getAttribute('data-mask-format') ?? $format ?? "";
	const placeholder = inputElement.getAttribute('data-mask-placeholder') ?? $placeholder ?? "";
	const splitChar = inputElement.getAttribute('data-mask-split-char') ?? $splitChar ?? "";
	const onKeyUp = () => {
		if (splitChar) {
			inputMasksByEl(inputElement, { format, placeholder, splitChar });
		} else {
			inputMaskByEl(inputElement, { format, placeholder });
		}
	};
	inputElement.addEventListener('keyup', onKeyUp);
	inputMaskByEl(inputElement, { format, placeholder });
	return function unregisterMaskKeyUpEventByEl() {
		inputElement.removeEventListener('keyup', onKeyUp);
	};
}