본문 바로가기
JAVASCRIPT/TEXTAREA byte제한

TEXTAREA에 byte 제한 하는법

by 정윤재 2008. 10. 23.

가끔가다 게시판이나 뭐 하여간... ㅋㅋㅋ

글자수를 제한해야 하는 곳이 있습니다.

그런데 문제는 어떻게 해야 될런지 모른다는 문제가 생기고

이게 DB에 들어갈 시에 한글의 경우 문제가 생길수 있다는 점에 주목

해야 합니다.

첫번째는 아래에 샘플 코드를 써놓았습니다.(핸드폰 전송용이므로

80 byte제한 ^^ 실전용 코드입니다.)

두번째 getParameter로 다른 페이지에서 받아서 DB에 저장하겠죠?

문제는 UTF-8일 경우에 한글을 3byte씩 인식 한다는 것이죠.

그뿐만 아니라... 오라클의 경우 10g 부터 기본 캐릭터 셋이

UTF-8이기 때문에 문자를 받은 페이지에서는 EUC-KR 이어서 2byte 였어도...

들어가면서 3byte로 인식 되어 문제가 생길 수 있습니다.

DB column을 3byte로 생각해서 크기를 잡아놓아야 한다는 거죠

//코드 첨부합니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">

function textCounter(field, countField, maxLimit){
 temp_str = field.value;
 // countField.value = maxLimit - temp_str.length;
 countField.value = maxLimit - getByte_length(temp_str);

 if(countField.value < 0){
  alert(maxLimit + "Bytes를 초과할 수 없습니다.");
  temp_str = temp_str.substring(0, temp_str.length-(countField.value * -1 /2));
  field.value = temp_str;
  //countField.value = maxLimit - temp_str.length;
  countField.value = maxLimit - getByte_length(temp_str);
  field.focus();
 }//if
}


function getByte_length(str){
 var resultSize = 0;
 if(str == null){
  return 0;
 }

 for(var i=0; i<str.length; i++){
  var c = escape(str.charAt(i));
  if(c.length == 1){
   resultSize ++;
  }else if(c.indexOf("%u") != -1){
   resultSize += 2;
  }else if(c.indexOf("%") != -1){
   resultSize += c.length/3;
  }
 }
 return resultSize;

</script>
</head>
<body>
 <form name="f1">
 
   <table >
     <tr>
      <td width= 15% bgcolor=#F2F2F2 align="center">TEXT</td>
      <td>
         80Bytes까지 입력 가능.<br>
         <input type="text" name="msg_cnt" style='height:20;width:30;background-color:#FFFFFF;' maxLength="2" value="80" readonly>Bytes 남음</br>
         
         <textarea wrap="virtual" name="message"  rows='4' cols='40' style="font-size:9pt;overflow:hidden;" onkeyup="textCounter(this.form.message, this.form.msg_cnt,80);"
          onkeydown="textCounter(this.form.message, this.form.msg_cnt,80);"></textarea><br>
      </td>
     </tr>
   </table>
 </form>
</body>
</html>


댓글