[javascript] 글자 수 제한 및 체크하기

javascript로 입력란에 글자 수를 바이트 단위로 세고, 제한하는 방법을 작성하겠다.

아 참고로 바이트가 아닌 글자 수로 제한하고자 한다면 입력 태그에 maxlength 속성을 추가해주면 된다.

<input type="text" maxlength="3">

영어와 한글은 차지하는 바이트 수가 다르다. 한글은 2바이트, 영어는 1바이트를 차지하고 있다.

그러므로 총 바이트를 계산하고자 한다면 이 점을 고려해야 한다.

 우선 결과부터 보도록 하자.

 

0/0

스크립트를 처음 실행하면 글의 최대 바이트 수를 설정한다. 그리고 입력을 할때마다 한글은 2, 영어는 1로 계산이 된다.

이제 30byte 넘게 써보면 alert 창이 뜨면서 다시 내용에 30byte 까지 재작성 된다.

이제 코드를 보자.

<textarea id="text-area" cols="30" rows="10"></textarea>
<div><span id="count">0</span>/<span id="max-count">0</span></div>

언제나 그렇듯 html코드는 간단 명료 하다.

단지 특별하다면 바이트 수를 체크하기 위해 span 태그를 넣은 점?

이제 스크립트코드를 보도록 하자.

처음에는 입력 하는 곳에 keyup 이벤트를 추가해주고 초기 값을 세팅 해준다.

여기서 messge값을 함수 밖에서 선언해주는 이유는 나중에 할당할 때 마지막 저장 값을 가지고 있어야 하기 때문이다.

document.getElementById('text-area').addEventListener('keyup', checkByte);
var countSpan = document.getElementById('count');
var message = '';
var MAX_MESSAGE_BYTE = 30;
document.getElementById('max-count').innerHTML = MAX_MESSAGE_BYTE.toString();

이제 메시지를 받아서 byte로 계산해주는 함수를 추가해주자 한글은 charCode값이 128 이상이므로 이 값을 이용해서 구분하여 계산한다. 

  

function count(message) {
    var totalByte = 0;

    for (var index = 0, length = message.length; index < length; index++) {
        var currentByte = message.charCodeAt(index);
        (currentByte > 128) ? totalByte += 2 : totalByte++;
    }
    return totalByte;
}

이제 count 함수를 이용해서 총 byte를 확인하여 적용시키는 함수를 만들어보자.

제한한 byte보다 작으면 그대로 count를 입력해주고 message값을 저장해준다. 

만약 크다면 alert창을 띄우면서 이전에 저장한 messge값을 입력에 할당해주고 바이트를 다시 계산하여 입력해준다.

이 작업을 하기 위해 아까 message를 함수 밖에서 선언한 것이다.

function checkByte(event) {
    const totalByte = count(event.target.value);

    if (totalByte <= MAX_MESSAGE_BYTE) {
        countSpan.innerText = totalByte.toString();
        message = event.target.value;
    } else {
        alert(MAX_MESSAGE_BYTE + "바이트까지 전송가능합니다.");
        countSpan.innerText = count(message).toString();
        event.target.value = message;
    }
}