![[JavaScript] 입력한 텍스트의 Byte 체크](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtIjKP%2FbtrZc7UWiZA%2FF6IUVYGCXoZ6akaKc6NNoK%2Fimg.jpg)
728x90
Chapter#01. [JavaScript] 입력한 텍스트의 문자길이 체크
Chapter#02. [JavaScript] 입력한 텍스트의 Byte 체크
다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요하게 되었다.
텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면
자동으로 더 이상의 텍스트 삽입을 막는 경우가 필요했다.
경고창을 닫으면 255 값이 넘어서명 더이상 입력할 수 없게 처리한다.
# 소스코드
<html>
<head>
<title>:: JavaScript Byte 체크하기 ::</title>
</head>
<style type="text/css">
.writeText { width:99%;height:100px;resize:none; }
.viewByte { font-weight:bold;color:#FF0000; }
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("writeText").addEventListener("keyup", function(event) {
inputLimitByteChecked(event.target);
});
});
// @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>
<body>
<h1>■ 입력 텍스트의 Byte 체크</h1>
<textarea class="writeText" id="writeText" data-byte="255"></textarea>
<p><span class="viewByte">0</span> Byte 입니다.</p>
</body>
</html>
# 출력결과
■ 입력 텍스트의 Byte 체크
0 Byte 입니다.
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX를 이용하는 Page Navigation 제작 (0) | 2023.12.08 |
|---|---|
| [JavaScript] 체크박스를 이용한 백분율 선택 (0) | 2023.05.24 |
| [JavaScript] 입력한 텍스트의 문자길이 체크 (0) | 2023.02.14 |
| [JavaScript] 휴대폰 번호 Hyphen(-) 삽입 형식 자동 입력폼 (0) | 2022.12.26 |
| [JavaScript] 자바스크립트를 이용한 캘린더 제작 (8) | 2022.12.23 |