자바스크립트(Javascript) 글자수 체크하는 방법

자바스크립트

자바스크립트(Javascript) 글자수 체크하는 방법

 

환경 : Eclipse Mars

 

입력란에 글자수를 제한하는 방법입니다. Object length 함수로 해결할 수가 없습니다. 영어와 한글의 바이트 수가 틀리기 때문입니다. 한글은 2바이트, 영어는 1바이트 입니다. 입력란에 길이 값을 영어는 1, 한글은 2로 계산해서 초가 하지 못하도록 제한하는 방법에 대해 알아 보겠습니다.

 

먼저 input 박스에 입력한 값을 charAt() 함수로 한자씩 분리할 것입니다. for 문을 돌려 하나씩 분석하는데 아스키값이 아닌 유니코드이면 길이 2로 계산하고 아스키값이면 1로 합니다. 그말은 2바이트를 사용하는 문자냐 아니냐를 escape() 함수로 판단하는 것입니다. escape() 는 한글일때 16진수형태로 변환해주기 때문에 length 6 이 됩니다. 예를 들어 %u2345 같이 되는 것이죠.

 

for (var i = 0; i < strLen; i++) {
	oneChar = strValue.charAt(i);
	if (escape(oneChar).length > 4) {
		totalByte += 2;
	} else {
		totalByte++;
	}

	// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
	if (totalByte <= maxByte) {
		len = i + 1;
	}
}

 

두번째 단락에서는 제한하는 숫자보다 입력한 값이 큰지 판단하게 됩니다. 크다면 입력 가능한 크기인 len 만큼 substr() 함수를 사용해서 자르게 됩니다. 자른 값은 input obj.value = str2 로 입력합니다.


// 넘어가는 글자는 자른다.
if (totalByte > maxByte) {
	alert(maxByte + "자를 초과 입력 할 수 없습니다.");
	str2 = strValue.substr(0, len);
	obj.value = str2;
	chkword(obj, 4000);
}

 

아래 소스는 input 박스에 입력할 글자를 제한하는 함수의 전체 소스입니다. input 박스에서 onkeyup 이벤트가 발생할때 글자수 체크하는 함수 chkword() 을 실행하게 됩니다.  


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>ID 값 전송</title>
<script type="text/javascript">
	function chkword(obj, maxByte) {

		var strValue = obj.value;
		var strLen = strValue.length;
		var totalByte = 0;
		var len = 0;
		var oneChar = "";
		var str2 = "";

		for (var i = 0; i < strLen; i++) {
			oneChar = strValue.charAt(i);
			if (escape(oneChar).length > 4) {
				totalByte += 2;
			} else {
				totalByte++;
			}

			// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
			if (totalByte <= maxByte) {
				len = i + 1;
			}
		}

		// 넘어가는 글자는 자른다.
		if (totalByte > maxByte) {
			alert(maxByte + "자를 초과 입력 할 수 없습니다.");
			str2 = strValue.substr(0, len);
			obj.value = str2;
			chkword(obj, 4000);
		}
	}
</script>
</head>
<body>
	<input type="text" id="byteInfo" name="title"
		onkeyup="chkword(this, 5)" />
</body>
</html>

 

 

 

Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of https://tonks.tistory.com 통스 블로거 2016.08.23 00:29 신고  댓글주소  수정/삭제  댓글쓰기

    15를 넣어서 직접 테스트를 해보니, 영어일 때에는 제대로 동작하지만, 한글은 그렇지가 않은 것 같습니다... ─.─;;

  2. Favicon of https://mainia.tistory.com 녹두장군 2016.09.02 13:07 신고  댓글주소  수정/삭제  댓글쓰기

    제대로 하려면 숫자와 영어, 특수문자, 한글 4가지를 분류해서 길이 값을 체크하셔야 합니다. 숫자와 영어, 특수문자는 1바이트로 계산하고 한글은 2바이트로 합니다.

  3. Anoy 2019.10.14 15:46  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 유용하게 잘 보았습니다.
    궁금한 부분이 있어 댓글 남깁니다.

    문자열을 자르는 부분에서
    맨 하단에 chkword(obj, 4000); 이 부분이 왜 들어가는건가요?