Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

웹 프로그래밍/자바스크립트
반응형

자바스크립트에서 입력란에 글자수를 제한하는 방법입니다. Object length 함수로는 해결할 수가 없습니다. 영어와 한글의 바이트수가 틀리기 때문입니다. 한글은 2바이트, 영어는 1바이트로 다릅니다. 입력란에 길이 값을 영어는 1, 한글은 2로 계산해서 초과하지 못하도록 제한하는 방법을 사용해야 합니다.

 

 

▼ 먼저 input 박스에 입력한 값을 charAt() 함수로 하나의 글자를 분리합니다. for 반복문을 돌려 하나씩 분석하는데, 유니코드일 경우 길이를 2로 계산하고, 아스키값일 경우 1로 합니다. 아스키와 유니코드의 판단은 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() 을 실행합니다. 

<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
,