우아한 프로그래밍

1. 문제상황

브라우저의 호환 문제로 input[type='number']는 크롬에서는 먹히나 익스플로러에서 먹히지 않는다. 
그래서 숫자만 입력받기위해서는 따로 구현을 해줘야한다. 
아래에서 구현 방법을 설명하겠다.

 

2. 적용방법 (1)

1.JavaScript

function onlyNumberInput2( Ev )
{
    if (window.event) // IE코드
        var code = window.event.keyCode;
    else // 타브라우저
        var code = Ev.which;
 
    if ((code > 34 && code < 41) || (code > 47 && code < 58) || (code > 95 && code < 106) || code == 8 || code == 9 || code == 13 || code == 46)
    {
        window.event.returnValue = true;
        return;
    }
 
    if (window.event)
        window.event.returnValue = false;
    else
        Ev.preventDefault();    
}
 
<input type = "text" onKeyDown = "javascript:onlyNumberInput2(event)" style='IME-MODE: disabled' />

2. Html

<input type = "text" onKeyDown = "javascript:onlyNumberInput2(event)" style='IME-MODE: disabled' />

3. 적용방법(2) 

해당 방법을 더 추천합니다..



    		// 숫자가 아닌경우 자동 삭제    		
    		function removeChar(e){
    			var e 			= e || window.event
    				,keyCode 	= (e.which) ? e.which : e.keyCode;

    			if (keyCode == 8 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
    				return;
    			} else {
    				e.target.value = e.target.value.replace(/[^0-9]/g, '');
    			};
    		}
<input oninput="removeChar(event)" type="text" value="${rcvrTno}"  >

 

profile

우아한 프로그래밍

@자바조아!

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!