블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



가끔 사이트에서 덧글 같은 걸 쓰다보면 문자를 입력하면 조금한 Box에 byte값이 계산되어서 나타나게 된다.
어떻게 하는 것 일까...여러 가지 방법이 있을 수 있겠지만...나는 Script를 이용해서 만들어 보았다.
아래 그림은 다음 카페에서 사용하고 있는 덧글쓰는 부분이다.
사용자 삽입 이미지

위 그림에서 "안녕하세요~!"가 12byte 라고 나와 있네~!^^

위 그림과 똑같은 디자인은 아니지만 간단하게 Textbox 2개를 만들어서 위와 같이 표현하도록 만들어 보았다.
에디터플러스를 실행을 해서 아래와 같은 코드를 입력 했다. 간단한 디자인(?!)이다.ㅋ

HTML 코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>문자열 byte표현</TITLE>

</HEAD>

 

<BODY>

<input type="text" id="Text1" onkeyUp="OntextCheck(this);" style="width:300px;"><br />

<input type="text" id="txtbyte" style="width:50px;" readonly>/600byte

</BODY>

</HTML>


위 코드를 실행 브라우저로 보면 간단한 textbox 2개가 나타날 것이다. 여기에서 글을 입력할 textbox에 onKeyUp이벤트를 주고, Scripte 함수를 호출해서 문자의 byte 값을 나타낸 다음에 readonly로 되어있는 textbox에 표현해 주면 될 것 이다. 스크립트 합수는 OntextCheck() 이다.

아래 스크립트 함수를 <HEAD></HEAD>사이에 입력한다.

Scirpt 함수

<script type="text/javascript">

        function OntextCheck(obj)

        {

            var str = new String(obj.value);

               var _byte = 0;

                       if(str.length != 0)

                       {

                              for (var i=0; i < str.length; i++)

                              {

                                      var str2 = str.charAt(i);

                                      if(escape(str2).length > 4)

                                      {

                                             _byte += 2;

                                      }

                                      else

                                      {

                                             _byte++;

                                      }

                              }

                       }

               document.getElementById("txtbyte").value = _byte;

        }

</script>


위 스트립트 함수중에 중요한 메소드는 escape 일 것이다.
escape 함수는 String 개체를 모든 컴퓨터에서 읽을 수 있도록 인코딩(encoding) 해 준다.(ASCII 글자로 접속할 수 있도록 인코딩한다)
예를 들어 "abcd"는 인코딩하면 "abcd"로 나타나고, "글"은 "%uAE00" 인코딩이 된다.
ASCII 코드를 인코딩 된 것을 다시 디코딩(decoding)하려면 unescape 를 사용하면 된다.
이렇게 인코딩 된 값의 문자 길이를 알아서 ++ 시켜주면 되는 것이다.

자 그럼 테스트 해보자~!
사용자 삽입 이미지

음~~ 잘되는 군~!^^
스크립트도 나름 잼있는 것 같다~^^
Posted by happydong
, |