JQuery 한글 글자수 체크 - jQuery hangeul geuljasu chekeu

Question

Javascript에서 문자열 길이를 체크할때, 그냥 length를 사용하면

1Byte인 영문, 숫자 입력시엔 상관없지만

한글 '가' 입력시에도 length 값은 1로 나온다.

아래 스크립트는 escape() 함수를 이용해 입력받은 값이 한글인지 판단 후 글자수를 2byte로 계산해준다.

저작자표시비영리변경금지

'프로그래밍 > javascript' 카테고리의 다른 글

[javascript] 자주 사용하는 정규식 메모 (0)	2020.05.21
[javascript] 브라우저 IE 감지 (0)	2020.05.21
[React] CentOS7 / React + create-react-app + yarn + Node js 환경 구축 (0)	2019.07.02
[jQuery] file type 예외처리 (0)	2019.04.30
JQuery 노드찾기 (0)	2018.04.17

Javascript에서 문자열 길이를 체크할때, 그냥 length를 사용하면

1Byte인 영문, 숫자 입력시엔 상관없지만

한글 '가' 입력시에도 length 값은 1로 나온다.

아래 스크립트는 escape() 함수를 이용해 입력받은 값이 한글인지 판단 후 글자수를 2byte로 계산해준다.

See the Pen 한글포함 문자열 길이값 by juein (@juein) on CodePen.

'Web > Javascript' 카테고리의 다른 글

[javascript] 자주 사용하는 정규식 메모 (0)	2019.10.07
[javascript] Math.random 을 사용한 난수 생성 (0)	2019.10.07
[Javascript] input 전화번호 입력시 하이픈(-) 자동 붙이기 (0)	2019.04.12
[Javascript] 간단한 아코디언 토글 (0)	2019.04.12
[javascript] 변수/상수 - var, let, const (0)	2018.03.01

티스토리 뷰

JQUERY 글자수, 글자 바이트 체크

// 글자수 체크
function validateMaxLength(id, size){
	$("#"+id).keyup(function (e){
	    var content = $(this).val();
	    // $('#counter').html("("+content.length+" / 최대 200자)");    //글자수 실시간 카운팅

	    if (content.length > size){
	        alert("최대 "+size+"자까지 입력 가능합니다.");
	        $(this).val(content.substring(0, size));
	        // $('#counter').html("(200 / 최대 200자)");
	    }
	});
}

// 글자 바이트 체크
function validateMaxByte(id, size){	
	$("#"+id).keyup(function (e){
		
	    var str = $(this).val();	    
	    var str_len = str.length;
	    
	    var rbyte = 0;
	    var rlen = 0;
	    var one_char = "";
	    
	    for(var i=0; i<str_len; i++){
	    	one_char = str.charAt(i);
	    	if(escape(one_char).length > 4){
	    	    rbyte += 3;                                         //한글3Byte
	    	}else{
	    	    rbyte++;                                            //영문 등 나머지 1Byte
	    	}

	    	if(rbyte <= size){
	    	    rlen = i+1;                                          //return할 문자열 갯수
	    	}
	    }
	    
	    if(rbyte > size){
	    	alert("최대 "+size+"byte까지 입력 가능합니다.");
	    	 $(this).val(str.substr(0,rlen));
	    }

	});
}



<script>
	validateMaxByte("etc", 300);	// maxbyte 체크
    validateMaxLength("etc", 300);	// 길이 체크

<script>

<html>
	<textarea id="etc" name="etc" ></textarea>
</html>

끗!@#@#%ㄲ

자바스크립트에서 입력란에 글자수를 제한하는 방법입니다. 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>

jquery 글자수 체크 JSP 글자수 세기 react 글자수 세기