웹마스터 팁

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

샘플보기
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" 이부분을 꼭 삽입할것.

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

총으면 추천한방..펑..
제목 글쓴이 날짜
정말 쉬운 이미지 롤오버 [3] Nopedy Lee 2002.12.05
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬]. [10] 김태경 2002.11.23
iframe 내용에 맞게 자동으로 크기 조절하기 [36] 행복한고니 2002.11.21
[파파스 1] 즐겨찾기 추가기능 소스 [5] 파파스 2002.11.20
제로님 Select Box 조금 바꾼거... [5] 행복한고니 2002.11.18
아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [7] (づ_-) 커터칼 2002.11.18
[re] 아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [2] Mahican 2002.12.02
이미지 변환함수(롤오버) [3] 행복한고니 2002.11.18
글상자글적으면 적은수가 숫자로 표시(글제한할때좋죠). [2] 아벨라 2002.11.18
레이어를 원하는 곳에 고정하기입니다. [7] 아벨라 2002.11.14
윈도우 할아버지 나타나게 하기 [11] 행복한고니 2002.11.14
고정된 배경이미지는 싫다면서... [9] 디아릭스 2002.11.12
엔지오같은 메뉴 만들기 #2 - Error 수정판 -_-;; [13] Eccen 2002.11.12
[re] 엔지오같은 메뉴 만들기 #2 -> 레이어배치 팁! //ⓦⓞⓞⓡⓨ님참고 [3] Aracing™ 2003.01.10
방문자가 특정부분 텍스트크기 바꿀수 있게 (확대/축소) [2] 디아릭스 2002.11.05
링크 포커스 없애기 3탄 [10] 멀대 2002.11.05
엔지오같은 메뉴 만들기 #1 - 수정판 [6] Eccen 2002.11.05
[자작] select 폼 태그 html로 허접하게나마 꾸며보기 [18] zero 2002.11.05
글씨 하이퍼링크시 밑줄 없에기 [8] 이솔렛 2002.10.31
하이퍼링크 점선 테두리 없애기 [9] 레드 2002.10.31