[JavaScript] input 입력 글자수 제한 하기

input 에 대한 글자수 validation 를 설정하려고 한다.

input 에 입력할 수 있는 최대 글자를 50이라고 가정했을 때 50이상의 글자가 입력될 경우 제한하는 것이다.

함수를 만들어 이를 활용하는 방법이다.

 

/**
 * input text size 체크
 */
const inputSizeChk = function(obj, size, isSpChk){

	let byteCnt = 0;
	let temp;
	let e = window.event;
	const pattern = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\(\=]/gi;

	for(var i=0;i<obj.value.length;i++) {
		temp = obj.value.charAt(i);
		
		escape(temp).length > 4 ? byteCnt += 2 : byteCnt += 1;
		//사이즈 체크
		if(byteCnt > size){
			if(e.keyCode != 8){
				alert('사이즈 오버');
				let text = obj.value;
				text = text.substring(0, i);
				obj.value = text;
				e.preventDefault();
	
				return false;
			}
		}
		//특수문자 체크
		if(isSpChk && pattern.test(temp)){
			if(e.keyCode != 8){
				alert('특수문자 필요');
				let text = obj.value;
				text = text.substring(0, i);
				obj.value = text;
				e.preventDefault();

				return false;
			}	
		}
	} 
};

 

사용예시

<input th:type="text" onkeyup="inputSizeChk(this, 50, true);">