[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

Posted at 2020. 9. 10. 15:43 | Posted in JavaScript & jQuery/JavaScript




참고 : https://zzznara2.tistory.com/458







■ 입력 텍스트 값 자동으로 Byte체크하기





다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요했다.


텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면


자동으로 더 이상의 텍스트 삽입을 막는 예이다.



# 소스코드

<html>

<head>

<title>:: JavaScript Byte 체크하기 ::</title>

<style type="text/css">

    .contents { width : 99%;height : 100px; }

    .viewByte { font-weight : bold;color : red; }

</style>

<script type="text/javascript">


    // @see     설정된 바이트의 크기를 넘어서지 못하게 체크하는 함수

    function inputLimitByteChecked( obj ) {


        var calByte = {

            getByteLength : function( string ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;


                for( let num = 0; num < string.length; num++ ) {

                    size += this.charByteSize( string.charAt( num ) );

                }


                return size;

            }

            , cutByteLength : function( string, length ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;

                let rIndex = string.length;


                for( let num = 0; num < string.length; num++ ) {


                    size += this.charByteSize( string.charAt( num ) );


                    if( size == length ) {

                        rIndex = num + 1;

                        break;

                    } else if( size > length ) {

                        rIndex = num;

                        break;

                    }

                }


                return string.substring( 0, rIndex );

            }

            , charByteSize : function( ch ) {

                if( ch == null || ch.length == 0 ) {

                    return 0;

                }


                let charCode = ch.charCodeAt( 0 );


                if( charCode <= 0x00007F ) {

                    return 1;

                } else if( charCode <= 0x0007FF ) {

                    return 2;

                } else if( charCode <= 0x00FFFF ) {

                    return 3;

                } else {

                    return 4;

                }

            }

        };


        if( calByte.getByteLength( obj.value) > obj.dataset.byte ) {

            alert("작성할 수 있는 텍스트 글자 범위를 초과하였습니다.");

            obj.value = calByte.cutByteLength( obj.value, obj.dataset.byte );

        } else {

            document.getElementsByClassName( "viewByte" )[0].innerText = calByte.getByteLength( obj.value );

        }

    }

</script>

</head>

<body>

    <h1>■ 입력 텍스트의 자동 Byte 체크</h1>

    <textarea class="contents" onKeyup="inputLimitByteChecked( this );" data-byte="255"></textarea>

    <p><span class="viewByte">0</span>&nbsp;Byte 입니다.</p>

</body>

</html>




이제 해당 코드의 출력결과를 살펴보자.


텍스트 박스에 글자를 계속 입력해 나가면 data-byte 에 설정된 255 값이 넘으면 경고창이 나타날 것이다.




# 출력결과




경고창을 닫으면 255 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기