textarea 글자수 제한 / 바이트(Byte) 제한

textarea 글자수 제한 / 바이트(Byte) 제한

 

 

클라이언트로부터 입력받고자 하는 텍스트가 긴 문자열의 경우, textarea태그를 설정하여 받게됩니다.

이 때, 입력받을 수 있는 최대 바이트수를 정해두고 해당 범위 내에서만 입력가능하도록 하는 자바스크립트 함수를 설정하겠습니다. (기본 태그로 bootstrap 클래스 적용)

※제한을 "글자수"로 두지않는 이유
한글은 한글자당 2byte를 할당하고, 영문자는 한글자당 1byte를 할당합니다.
만약 제한 기준을 "글자수"로 설정한다면 최대치로 입력했다고 가정했을 때, 한글과 영문자의 구성에 따라TextArea에서 전달하는 데이터의크기가 가변적이게 됩니다.
즉, TextArea를 통하여 전달하는 데이터양의 최대값을 설정하겠다는 취지를 벗어나게됩니다.

 

 

최대 100byte까지 입력가능하도록 설정

 

 

 - 기본적으로 화면에 표출될 textarea 태그를 테이블에 넣어서 설정한 html설정부분입니다.

<table class="table border">
    <tr>
        <th style="vertical-align: middle;">
            TextArea<br/>
            <sup>(<span id="nowByte">0</span>/100bytes)</sup>
        </th>
        <td>
            <form id="frm_textArea" name="frm_textArea">
                <textarea rows="10" 
                    class="form-control" 
                    id="textArea_byteLimit" 
                    name="textArea_byteLimit" 
                    onkeyup="fn_checkByte(this)"></textarea>
            </form>
        </td>
    </tr>
</table>

  textarea태그의 문자가 입력될때마다 자바스크립트에 설정한 "fn_checkByte" 함수가 실행되고, 해당함수에서 입력된 바이트값을 계산하여 id값이 "nowByte" 인 span태그에 해당값을 재설정하여 확인 가능하도록 할것입니다.

 

 

 - 입력된 글의 바이트수를 체크하고, 적절한 결과처리를 진행해줄 자바스크립트함수("fn_checkByte") 설정부분입니다.

//textarea 바이트 수 체크하는 함수
function fn_checkByte(obj){
    const maxByte = 100; //최대 100바이트
    const text_val = obj.value; //입력한 문자
    const text_len = text_val.length; //입력한 문자수
    
    let totalByte=0;
    for(let i=0; i<text_len; i++){
    	const each_char = text_val.charAt(i);
        const uni_char = escape(each_char); //유니코드 형식으로 변환
        if(uni_char.length>4){
        	// 한글 : 2Byte
            totalByte += 2;
        }else{
        	// 영문,숫자,특수문자 : 1Byte
            totalByte += 1;
        }
    }
    
    if(totalByte>maxByte){
    	alert('최대 100Byte까지만 입력가능합니다.');
        	document.getElementById("nowByte").innerText = totalByte;
            document.getElementById("nowByte").style.color = "red";
        }else{
        	document.getElementById("nowByte").innerText = totalByte;
            document.getElementById("nowByte").style.color = "green";
        }
    }
}

  1. 글자가 입력될때마다, 유니코드로변환

  2. 변환된유니코드의 길이값으로 한글여부를 판단하여 전체바이트수를 계산합니다.(한글:2Byte, 그외:1Byte)

  3. 계산된 전체바이트 수 값을 id값이 "nowByte"인 span태그에 재설정합니다.

  4. 계산된 전체바이트 수가 설정한 최대바이트수를 초과한 경우 경고창(alert) 띄웁니다.

  cf. css 글씨색상 설정 : 초과된경우("red"), 가능범위내인 경우("green")

 

 

부트스트랩 라이브러리 포함된 해당 html문서 첨부파일입니다.

exam01.zip

1.20MB