textarea 입력 글자수 자동으로 표시하기 > 기술자료

• 목록

입력창에 글자를 넣으면 자동으로 몇자를 넣었는지 보여주는 JavaScript 팁 입니다

아래 샘플을 클릭하면 실제 입력해서 볼수 있으며


샘플예제 : https://www.happyjung.com/demo/js/byte_check.php


<script>
function byte_check(wr_message, sms_bytes, max_byte)
{
    var conts = getObject(wr_message);
    var bytes = getObject(sms_bytes);

    var i = 0;
    var cnt = 0;
    var exceed = 0;
    var ch = '';

    for (i=0; i<conts.value.length; i++)
    {
        ch = conts.value.charAt(i);
        if (escape(ch).length > 4) {
            cnt += 2;
        } else {
            cnt += 1;
        }
    }

    bytes.innerHTML = cnt;
    if(max_byte == 'undefined') max_byte = 80;

    if (cnt > max_byte)
    {
        exceed = cnt - max_byte;
        alert('메시지 내용은 '+max_byte+'바이트를 넘을수 없습니다.\n\n작성하신 메세지 내용은 '+ exceed +'byte가 초과되었습니다.\n\n초과된 부분은 자동으로 삭제됩니다.');
        var tcnt = 0;
        var xcnt = 0;
        var tmp = conts.value;
        for (i=0; i<tmp.length; i++)
        {
            ch = tmp.charAt(i);
            if (escape(ch).length > 4) {
                tcnt += 2;
            } else {
                tcnt += 1;
            }

            if (tcnt > max_byte) {
                tmp = tmp.substring(0,i);
                break;
            } else {
                xcnt = tcnt;
            }
        }
        conts.value = tmp;
        bytes.innerHTML = xcnt;
        return;
    }
}

function getObject(objectId){
    if(document.getElementById && document.getElementById(objectId)) {
        return document.getElementById(objectId); 
    } else if (document.all && document.all(objectId)){
        return document.all(objectId); 
    } else if (document.layers && document.layers[objectId]){
        return document.layers[objectId]; 
    } else {
        return false;
    }
}
</script>

입력 글자수를 확인하는 방법입니다<br>
<br>
        
<textarea id="wr_message" name="wr_message" style="width:100%; height:100px;" onkeyup="byte_check('wr_message', 'sms_bytes');"></textarea>
<br>
<span id="sms_bytes">0</span> / 80 byte