그러냐

[javascript]한글제외 숫자만 입력 10자리 제한 본문

javascript

[javascript]한글제외 숫자만 입력 10자리 제한

관절분리 2024. 12. 18. 13:14
반응형

<input type="hidden" id="hiddenValue" name="hiddenValue" value="1">
<input type="text" maxlength="10" id='psch' name='sale_num' style="width:150px">
<p id="message"></p>

let isComposing = false; // 한글 조합 상태 플래그

		document.addEventListener("DOMContentLoaded", function () {
			const inputField = document.getElementById("psch");

			inputField.addEventListener("compositionstart", () => {
				isComposing = true; // 한글 조합 시작
			});

			inputField.addEventListener("compositionend", (event) => {
				isComposing = false; // 한글 조합 종료
				filterInput(event.target); // 조합 종료 후 필터링 실행
			});

			inputField.addEventListener("input", (event) => {
				if (!isComposing) {
					filterInput(event.target); // 조합 중이 아니면 즉시 필터링
				}
			});
		});

		function filterInput(inputField) {
			const currentValue = inputField.value;
			const filteredValue = currentValue.replace(/[^0-9]/g, ""); // 숫자만 남기기

			if (currentValue !== filteredValue) {
				// 값이 변경된 경우에만 업데이트
				inputField.value = filteredValue;
			}
			checkLength()
		}
        function checkLength() {
            const numInput = document.getElementById('psch');
            const message = document.getElementById('message');
            const hiddenValue = document.getElementById('hiddenValue');

            const length = numInput.value.length;

            if (length === 10) {
                hiddenValue.value = 1; 
                message.textContent = '';
            } else if (length < 10) {
                message.textContent = `입력된 자릿수: ${length} (10자 필요)`;
                hiddenValue.value = 0; 
            }
        }
반응형