Input 태그에서 숫자(양수,음수)만 입력 받기 - 한글 입력 제한

2016. 12. 23. 19:59[개발] 지식/JavaScript

코드

//한글 입력제한  
$(selector).on('keyup', function(event){  
    var inputVal = $(this).val();  
  var regex = /\[ㄱ-ㅎ|ㅏ-ㅣ|가-힣\]/;  

  if(regex.test(inputVal)){  
        $(this).val('');  
  }else{  
        return;  
  }  
});  

// 숫자, - 만 입력되도록 수정  
$(selector).on('keypress',function(event){  

    var key = event.charCode || event.keyCode || 0; // keyCode를 가져온다  
  var keyValue = event.key; // jquery로 눌려진 값을 가져온다  
  var str = $(selector).val(); // 현재 input태그에 입력된 문자열을 가져온다

  var regex = /^\[-\]?\\d\*$/g; // 음수처리를 위한 정규식, 맨 앞에 '-'가 오거나 숫자가 올 수 있다  
  var totalStr = String(str).replace(/^\\s+|\\s+$/g, "") + keyValue; // concat  

  if(key == 8 || key == 9 || key == 46 ){

        // 8, 9, 46번은 backspace, tab, del의 keyCode -> 무조건 통과  
        return true;  
  }else if(key == 45 || (key >= 37 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)){

        // 45 : '-', 37~40 : 방향키, 48~57 과 96~105 : 숫자키(오른쪽키패드 포함)  
        if(regex.test(totalStr)){  
            return;  
  }else{  
            return false;  
  }  
    }else{  
        return false;  
  }  

});

기본적으로 숫자와 '-', 그리고 del,tab,backspace,방향키의 입력만 허용한다.

keyup이벤트에서는 한글 입력을 감지하고 이를 ''(빈값)으로 치환한다. 원래 목표는 치환이 아니라 입력 자체를 막고자 했는데, 한글 입력 자체를 입력으로 인정하지 않아 정상적인 처리가 불가능했다. 다른 방법이 있을지 모르지만 일단 이걸로 퉁치고 다음 기회에 개선하고자 한다.

keypress 이벤트에서는 한글 입력으로 호출이 되지 않는다. 따라서 여기서는 숫자와 '-'를 제외한 모든 문자를 제한한다. 그리고 정규식을 통해 '-'문자는 맨 앞에만 쓰여질 수 있도록 처리한다.

샘플

<