[자바스크립트] 입력한 문자열 Byte 체크 하고 계산하기 (onkeyup)

입력한 문자열에 대해서 Byte를 계산하고 화면에 노출시키는 소스 코드입니다. 문자메시지를 보낼 때 유용하게 사용하실 수 있습니다. textarea에 onkeyup 함수를 통해서 실시간으로 text에 대해서 Byte를 확인 가능 합니다. charCodeAt() 메서드를 통해서 입력값에 대한 문자의 유니코드 코드 포인트를 반환합니다. 한글에 대해서는 totalByte를 +2 시켜 주면서 계산하고 있습니다. 추가로 전송 버튼을 클릭했을 때는 2000 Byte가 넘었는지 체크하고 있습니다. 

 

간단한 함수 확인하시고 응용 가능 하십니다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var limitByte = 2000;
var totalByte = 0;

function fn_chk_byte(obj){
    totalByte = 0;
    var message = $(obj).val();

    for(var i =0; i < message.length; i++) {
            var currentByte = message.charCodeAt(i);
            if(currentByte > 128){
            	totalByte += 2;
            }else {
            	totalByte++;
            }
    }

    $("#messagebyte").text(totalByte);
}

function sms_send(){
	if(totalByte > 2000){
		alert(limitByte+"Byte 까지 전송가능합니다.");
		return;
	}
}
</script>



<textarea id="msg_cont" name="msg_cont" style="height:250px;"  onkeyup="fn_chk_byte(this);"></textarea>
<div style="margin-top:20px;">
	<span id="messagebyte">0</span><span>/ 2000 Byte</span>
	<button  type="button" onclick="javascript:sms_send();">
		<strong>전송</strong>
	</button>
</div>

 

Byte 체크 화면

Byte 체크화면

전송버튼을 클릭했을때 체크