[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 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.

 

 

 

 

 

반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입  (0) 2020.09.10
[JavaScript]  (0) 2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어  (0) 2020.09.07
[JavaScript] 자바스크립트를 이용한 캘린더 제작  (13) 2020.07.13
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작  (0) 2020.07.12
//

티스토리툴바