블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

'keydown'에 해당되는 글 1

  1. 2006.12.06 키입력 이벤트처리2
2006. 12. 6. 13:37 Programing/HTML/JavaScript/CSS
키 입력 이벤트는 다양한 곳에 쓰이고 있다.
은행사이트의 계좌 입력 폼이라던지, 금액 입력 폼,
기타 이메일 입력 폼이나 키입력에 따른 처리가 필요한 어떠한 경우라도
키입력 이벤트는 쓰여진다.

금액:<input type="text" name="price" value="" onKeydown=" keyDownCheck(this);" />

위 코드를 예를 들어보면,
금액을 입력 하는 폼이므로 숫자 이외의 값이 들어가선 안된다.(경우에 따라서는 콤마도 출력 할 수 있겠지만 숫자만 입력으로 받아들이고 콤마는 내부적으로 처리해주는것이 좋겠다)

keydown 이벤트를 걸어준 이유는 사용자로부터 입력 받은 값을 체크해서
숫자가 아니면 키입력을 흘려버려야 하기때문이다.
만약 keyup 이벤트를 걸면 입력한 문자 or 숫자가 폼에 먼저 찍힌다음 이벤트 핸들러를 통해서
걸러주게 되므로 keydown이 좋은 선택이 되겠다.

keypress의 경우 firefox같은 모질라 계열의 브라우져에서 지원하지 않으므로 크로스 브라우징이
필요한 페이지에서는 사용 할 수 없다.

한가지 주의 해야 할 점은 키입력 이벤트 발생 시점이 IE와 모질라가 서로 조금씩 다르다는 것이다.
이 부분의 처리는 코드를 직접 보자.

우선 위 코드를 크로스브라우징이 가능하도록 수정하자.
인라인 스크립트는 지양해야 하므로 이벤트 핸들러를 따로 지정해주자.


금액: <input type="text" id="price" name="price" value="" />

스크립트
<script language="JavaScript">
<!--
var priceObj = document.getElementById('price');

if(window.event){
  priceObj.attacheEvent('onkeydown',priceEvtHandler);
}else{
  priceObj.addEventListener('keydown',priceEvtHandler,false);
}

function priceEvtHandler(e){
  var keyValue;

  if(window.event){
       keyValue = window.event,keyCode;
  }else{
       keyValue = e.keyCode;
  }

  if(keyValue == 13){      //enter
       return false;
  }else if(keyValue == 8){ //backspace
       return false;
  }else if((keyValue > 57 || keyValue < 48) && (keyValue > 105 || keyValue < 96)){
       if(window.event){
           window.event.returnValue = false;
       }else{
           e.preventDefault();
       }
  }
}
-->
</script>

다듬어지지 않은 코드이지만 그리 길지 않은 코드이다.
이벤트핸들러 priceEvtHandler를 살펴보면
keyValue 값으로 분기를 한다.
백스페이스는 입력된 숫자의 삭제를 위해 필요하므로 꼭 넣어 줘야 하며
엔터키의 경우는 필요에 따라 코드를 작성해주면 된다.
여기서는 아래쪽 분기문이 중요하다.
키코드 48~57은 기본키 0에서 9까지의 아스키코드값이고
96~105는 숫자패드 0에서 9까지의 아스키코드값이다.
사용자 입력이 이 범위를 벗어나면 이벤트를 그냥 흘려보내야 한다.
이때 이벤트를 흘려보내는 방식이 IE와 Mozila가 서로 다르다.
IE는 property값을 변경하고 Mozila는 메서드를 호출함으로써 이벤트를 흘려보낸다.


var reg_exp = /[0-9]/;

if(String.fromCharCode(keyValue).match(reg_exp) == null){
   if(window.event){
       window.event.returnValue = false;
   }else{
       e.preventDefault();
   }
}

위 코드를 조금 바꿔보았다.
아스키값으로 비교하는 대신에 정규식을 사용하였다.
훨씬 깔끔(?)해 보이나??

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

[CSS] onMouseOver,onMouseOut은 그만!!  (17) 2007.01.03
이벤트 Fake!!!  (0) 2006.12.12
테이블(Table) 그리기  (0) 2006.11.30
CSS Box Model  (0) 2006.11.30
Ajax + Drag&Drop 활용 사이트  (0) 2006.11.10
posted by 초딩입맛제주아재
prev 1 next