Dev Note/JavaScript2008. 3. 5. 20:08

팝업창 사이즈 자동 조절 (no scroll)

웹에서 많이 사용하는 팝업창의 스크롤이 발생하지 않게 사이즈를 자동으로 조절해 주는 스크립트

   function popupResize() {
      var innerBody = document.body;
      var v_width = innerBody.scrollWidth + 10;
      // 29는 window의 테이틀만 있을 때, 50은 window의 테이틀과 상태바 만 있을 때
      var v_height = innerBody.scrollHeight + 29;

      resizeTo(v_width, v_height);
   }

위에서 width에 10을 더한 것과 height에 29를 더한것은 Window 창의 사이즈를 더한 것이라, 맞지 않을 때에는 조절하면 된다.
height의 29는 window의 타이틀 외에 팝업에 아무것도 없을 때이며, 50은 window의 타이틀과 상태바가 있을 때 이다.

위 스크립트를 body 태그의 onload에 걸어두면 된다.
   <body onload="popupResize()">

위 popupResize() 함수는 익스플로워7에서는 문제가 조금 있다.
익스플로워7에서는 팝업이 뜰때 상태바와 주소가 사용자가 익스플로워의 설정을 변경하지 않으면 무조건 나타나게 되어있다. 익스플로워6에서는 위의 popupResize()를 사용해도 무방하나 익스플로워7을 감안한다면 아래의 팝업창 리사이즈를 하는 함수를 사용하는 것이 좋을 것 같다.

function newPopupResize() {
   var dWidth = parseInt(document.body.scrollWidth);
   var dHeight = parseInt(document.body.scrollHeight);
 
   var divEl = document.createElement('div');
   divEl.style.left = '0px';
   divEl.style.top = '0px';
   divEl.style.width = '100%';
   divEl.style.height = '100%';
 
   document.body.appendChild(divEl);
 
   window.resizeBy(dWidth - divEl.offsetWidth, dHeight - divEl.offsetHeight);
   document.body.removeChild(divEl);  
}

개인적으로 newPopupResize() 함수를 사용하는 것이 좋을 듯 하다.
Posted by as.wind.914
Dev Note/JavaScript2008. 3. 5. 16:46

숫자형식의 문자열에 천단위 ","를 넣자

숫자형식의 문자열에 천단위 ","를 삽입하는 자바스크립트 입니다.

   function numInsertComma(num) {
      var sign="";
     
      if(num<0) {
         num=num*(-1);
         sign="-";
      } else {
         num=num*1;
      }

      num = new String(num);
      var temp = "";
      var pos=3;
      num_len=num.length;

      while (num_len>0) {
         num_len=num_len-pos;

         if(num_len<0) {
            pos=num_len+pos;
            num_len=0;
         }

         temp = "," + num.substr(num_len,pos) + temp;
      }

      return sign + temp.substr(1);
   }

Posted by as.wind.914
Dev Note/JavaScript2008. 3. 5. 16:10

숫자만 입력 받는 TestField 만들기

입력을 받는 TextField에 숫자만 입력 가능하게 만들어 본다.

<script type="text/javascript">
    function numCheck(obj) {
        var numCheck = /^\d+$/;
        var checkStr = obj.value;

        if(checkStr != '') {
            if(!numCheck.test(checkStr)) {
                alert('숫자만 입력이 가능합니다.');
                obj.value = '';
                obj.focus();
            }
        }
    }
</script>

본문의 Form의 TextField에 아래와 같이 onkeyup에 위 스크립트를 걸어주면 끝 ...

<form name="inputForm" action="..." method="post">
    ...
    <input type="textfield" name="numInput" size="10" onkeyup="numCheck(this);" />
    ...
</form>

Posted by as.wind.914

티스토리툴바