Input MaxLength 한글,숫자,영어 체크 alert창 띄우기

입력창에 한글입력시 byte로 글자크기를 계산한다.

예를들어 maxLength가 10인 경우에 한글은 5글자만 입력이 되어야함.

 

IE와 Chorme은 keyup시 동작을 다르게 하여 브라우저 체크를 통해서 예외처리를 함.

/**
* Name : pubByteCheckTextarea
*Desc : 한글 숫자 영문 입력시 byte로 크기 체크해서 알럿창을 띄워줌, IE 와 Chrome는 다르게 동작하여 브라우저 체크 필요
*Param : event
*/
var agent = navigator.userAgent.toLowerCase();
var browserIE = false;
if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {
	browserIE =true;
}

var pubByteCheckTextarea =function(event) {
		console.log(event);
		var str = event.target.value, _byte = 0, strLength = 0, charStr = '', cutStr = '';
		var maxLength = event.target.maxLength; //속성에 있는 maxLength를 사용할경우
		
		if(maxLength == -1){
			maxLength = 10; // test 용으로 10자리 체크
		}
		if (str.length <= 0) {
			return;
		}
		for (var i = 0; i < str.length; i++) {
			charStr = str.charAt(i);
			if (escape(charStr).length > 4) {
				_byte += 2;
			} else {
				_byte++;
			}
			if (_byte <= maxLength) {
				strLength = i + 1;
			}
		}

		if (_byte > maxLength) {
			cutStr = str.substr(0, strLength);
			event.target.value = cutStr;

			/*
			IE는 event.isComposing 없어서 undefined가 떨어짐 
			IE는 알럿창이 1번 호출되지만 기타 브라우저는 2번이 호출되어 브라우저 체크후 isComposing체크하여 한번만 호출하도록 코드 추가
			숫자나 영문 입력시에 alert호출이 안되는 경우가 있어서 마지막글자 체크하여 알럿창이 호출되도록 추가
			 */
			if (!browserIE && !event.isComposing) {
				var lastChar = str.substr(-1, 1);
				var currentByte = lastChar.charCodeAt(0);
				if (currentByte <= 128) {
					alert(maxLength + "자를 초과하였습니다.");
				}
				return;
			}
			alert(maxLength + "자를 초과하였습니다.");
		}
	}

web개발이 처음이라 문법적이나 코드처리등에서 엉망진창이다.

캐쉬 삭제는 CTRL + F5를 이용하자~

 

-----수정-----

maxLength 속성을 추가시 영어 숫자 처리가 안되어 수정함

<input type="text" value="" id="CompanyName" onkeyup='pubByteCheckTextarea(event,20)' /> 

최대값이 20으로 호출 , 값 미등록시 최대값을 100으로 선언

var agent = navigator.userAgent.toLowerCase();
var browserIE = false;
if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {
	browserIE =true;
}

var pubByteCheckTextarea =function(event, length) {
		console.log(event);
		var str = event.target.value, _byte = 0, strLength = 0, charStr = '', cutStr = '';
		var maxLength = event.target.maxLength; //속성에 있는 maxLength를 사용할경우
		console.log("str : "+str+", length : "+str.length);
		console.log("maxLength : "+maxLength+", length : "+length);
		//maxLength 속성 미등록시 ie : 2147483647, chrome : -1
		if(maxLength == -1 || maxLength == 2147483647){
			//maxLength = 10; // test 용으로 10자리 체크
			console.log("length : "+length);
			if(length){
				maxLength =length;
			}else{
				maxLength=100;
			}
		}
		if (str.length <= 0) {
			return;
		}
		for (var i = 0; i < str.length; i++) {
			charStr = str.charAt(i);
			if (escape(charStr).length > 4) {
				_byte += 2;
			} else {
				_byte++;
			}
			if (_byte <= maxLength) {
				strLength = i + 1;
			}
		}
		console.log("_byte : "+_byte+", maxLength : "+maxLength);
		if (_byte > maxLength) {
			cutStr = str.substr(0, strLength);
			event.target.value = cutStr;

			/*
			IE는 event.isComposing 없어서 undefined가 떨어짐 
			IE는 알럿창이 1번 호출되지만 기타 브라우저는 2번이 호출되어 브라우저 체크후 isComposing체크하여 한번만 호출하도록 코드 추가
			숫자나 영문 입력시에 alert호출이 안되는 경우가 있어서 마지막글자 체크하여 알럿창이 호출되도록 추가
			 */
			 console.log("_byte : "+_byte+", maxLength : "+maxLength);
			if (!browserIE && !event.isComposing) {
				var lastChar = str.substr(-1, 1);
				var currentByte = lastChar.charCodeAt(0);
				if (currentByte <= 128) {
					alert(maxLength + "자를 초과하였습니다.");
				}
				return;
			}
			alert(maxLength + "자를 초과하였습니다.");
		}
	}