웹마스터 팁

안녕하세요.
이번에는 글상장에 글을 적으면 몇자적은지 모르잖아요.
그래서 따로 글상자를 만들어 거기에 몇글자 적은지 실시간으로 보여
주는 겁니다. 그러니까 문자메시지 보낼때 표시되는 글자수죠.

샘플보기
http://diyworld.biz/test3.html

**head 부분에 넣으세요.(자바스크립트)**

<script language="javascript">
function cal_byte(aquery)
{
        var tmpStr;
        var temp=0;
        var onechar;
        var tcount;
        tcount = 0;
        tmpStr = new String(aquery);
        temp = tmpStr.length;
        for (k=0;k<temp;k++)
        {
                onechar = tmpStr.charAt(k);
                if (escape(onechar).length > 4) {
                        tcount += 2;
                }
                else {
                        tcount++;
                }
        }
        document.form1.cbyte.value = tcount;
        if(tcount>255) {
                reserve = tcount-255;
                alert("설명은 30 이상은 전송하실수 없습니다.rn 쓰신 글은 "+reserve+"30자가 초과되었습니다.rn 초과된 부분은 자동으로 삭제됩니다.");
                cutText();
                return;
        }        
}

function cutText()
{
        nets_check(document.form1.comment.value);
}

function nets_check(aquery)
{
        var tmpStr;
        var temp=0;
        var onechar;
        var tcount;
        tcount = 0;
        tmpStr = new String(aquery);
        temp = tmpStr.length;
        for(k=0;k<temp;k++)
        {
                onechar = tmpStr.charAt(k);
                if(escape(onechar).length > 4) {
                        tcount += 2;
                }
                else {
                        tcount++;
                }
                if(tcount>255) {
                        tmpStr = tmpStr.substring(0,k);
                        break;
                }
        }
        document.form1.comment.value = tmpStr;
        cal_byte(tmpStr);
}

function cal_pre()
{
        var tmpStr;
        document.form1.item_num.value == -1 ;
        tmpStr = document.form1.comment.value;
        cal_byte(tmpStr);
}
</script>

**body 부분에 넣으세요.**

<form name="form1">
    <p>스킨에 적용해도 상당히 괜찮을뜻 합니다.</p>
    <p> </p>
    <p><input type="text" name="comment" onKeyUp='javascript:cal_pre();' style="border:1 solid #669090" size="51" maxlength="30" value="" tabindex="2"></p>
    <p><input size=5 value=0 name=cbyte style="border:1 solid #669090">
              /<font color="#0000FF"> 코멘트는 60byte 이하로 작성하여 주시기 바랍니다</font>
              <input type=hidden name=item_num value="-1" style="WIDTH: 0px; HEIGHT: 0px" size=5></p>
            
               </form>

**설명**

글상자 폼네임을 form1 으로 하였고 자바스크립트에도 form1 네임 맟춤
저는 글적을 상자 이름을 comment라 하고 자바스크립트에도 comment 맞춤
숫자가 표시될 글상자 이름을 cbyte라 함고 자바스크립트도 맞춤
input 타입에서 글적는 상자에는 onKeyUp='javascript:cal_pre(); 이부분을 삽입함.
그리고 글자수 표시될 상자에는 input type=hidden name=item_num value="-1" 이부분을 꼭 삽입할것.

이상입니다.
그냥 샘플보시고 소스보시면 수정하실수 있을것 같네요.

총으면 추천한방..펑..
제목 글쓴이 날짜
글상자글적으면 적은수가 숫자로 표시(글제한할때좋죠). [2] 아벨라 2002.11.18
이미지 변환함수(롤오버) [3] 행복한고니 2002.11.18
[re] 아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [2] Mahican 2002.12.02
아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [7] (づ_-) 커터칼 2002.11.18
제로님 Select Box 조금 바꾼거... [5] 행복한고니 2002.11.18
[파파스 1] 즐겨찾기 추가기능 소스 [5] 파파스 2002.11.20
iframe 내용에 맞게 자동으로 크기 조절하기 [36] 행복한고니 2002.11.21
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬]. [10] 김태경 2002.11.23
정말 쉬운 이미지 롤오버 [3] Nopedy Lee 2002.12.05
이미지 크기에 맞게 새창띄우는 자바소스인데요~ [3] 새벽이슬 2002.12.07
[re] 오류 아닌 오류 나시는 분덜... 임병찬 2003.04.22
아래 이미지크기에 맞게 새창띄우는 소스(기능개선판) (-_-) v [10] 행복한고니 2002.12.07
이동 메뉴 (Netscape 가능 NZEO.com 소스) [9] 박영창 2002.12.08
아래 새창에 맞게 이미지 띄우기 더더 업그레이드 판! [6] ATply 2002.12.09
출렁이며 내려오는 공지창.. [3] 아벨라 2002.12.10
홈페이지에 머무른 시간을 알림창으로 나타내기. [3] 시즌오브드림 2002.12.10
select form 으로 새창띄우기(수정:2002-12-19) [3] dolufy 2002.12.11
오른쪽 클릭 메뉴 [6] 디아릭스 2002.12.16
크롬리스 완벽해결! IE.2.0부터 Netscape까지 작동가능!! [13] 김민호 2002.12.16
div, Javascript 이용해서 섹션 테이블 만들기 [3] mnemosyne 2002.12.18