그러냐

입력박스(inputbox)에 숫자만 입력되도록.. 본문

javascript

입력박스(inputbox)에 숫자만 입력되도록..

관절분리 2016. 1. 27. 18:07
반응형

출처 아직 모를 뿐이야 일단 고 | 노란사자
원문 http://blog.naver.com/nanandayo/60063316090

TextBox에 숫자만 입력받기 위해서 여러가지 방법들이 있지만 자료들을 찾아본 결과 Javascript를 이용하는 것이 좋은 것 같다.

 

function 을 다음과같이 javascript로 맹글어 놓으시구요.

 

    function handlerNum()

    {

        e = window.event; //윈도우의 event를 잡는것입니다. 그냥 써주심됩니당.

 

        //숫자열 0 ~ 9 : 48 ~ 57, 키패드 0 ~ 9 : 96 ~ 105 ,8 : backspace, 46 : delete -->키코드값을 구분합니다. 저것들이 숫자랍니다.

        if(e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105 || e.keyCode == 8 || e.keyCode == 46)

        {

            if(e.keyCode == 48 || e.keyCode == 96)//0을 눌렀을경우

            {

                if(txtMileage.value == "" ) //아무것도 없는상태에서 0을 눌렀을경우

                    e.returnValue=false; //-->입력되지않는다.

                else //다른숫자뒤에오는 0은

                    return; //-->입력시킨다.

            }

            else //0이 아닌숫자

                return; //-->입력시킨다.

        }

        else //숫자가 아니면 넣을수 없다.

            e.returnValue=false;

    }

 

주석때문에 지저분해 보이지만 설명이라 이해하시기 빠를겁니다.

그런다음에.. htmlcontrol로 txtbox를 만드신후 그곳에 다가..이케 해주심 됩니당.

<input type="text" id="txtMileage" name="txtMileage" runat="server" onkeydown="handlerNum()">

 

key가 down될때 검사를 해서 입력받고 않받고 합니다...

 

_____________________________________________________________________________________

 

참고자료

 

1. 입력된 숫자값을 3자리씩 마다 콤마를 삽입하려면

 

TextTraffic1.Text = Convert.ToInt32(TextTraffic1.Text).ToString("#,###,###,###,##0");

 

2. 다른 방법...

TextTraffic1.Text = ConvertComma(TextTraffic1.Text);

public string ConvertComma(string str)
  {
   int result = Convert.ToInt32(str);
   NumberFormatInfo nfi = new CultureInfo( "en-US", false ).NumberFormat;
   nfi.NumberDecimalDigits = 0;
   return result.ToString("N", nfi);
  }

 

3. ASP.NET을 이용한 숫자 입력만 하도록 하려면...

RegularExpressionValidator 를 이용하여 정규표현식에

       [,0-9]{1,20}

이와 같이 넣으면 comma를 포함한 숫자를 허락하도록 한다. 숫자는 20자까지... ㅎㅎㅎ

 

사실 Javascript의 경우 컨트롤이 많은 것을 처리할 때에는 문제가 될 것 같네요..

그래서 저는 걍 Validator를 이용해서 처리하려고 합니다. 수고





//숫자만 입력받기 
function isNumeric(value) 

/* 백스페이스,텝,엔터,화살표,델리트,0~9,오른쪽0~9 */ 
if (value == 8 || value == 9 || value == 13 || (value >= 37 && 
value <= 40) || value == 46 || (value >= 48 && value <= 57) || (value >= 
96 && value <= 105)) { 
return true; 
} else { 
return false; 


//숫자와 하이픈(-)만 입력받기 
function isTelNum(value) 

/* 백스페이스,텝,엔터,화살표,델리트,0~9,오른쪽0~9 */ 
if (value == 8 || value == 9 || value == 13 || (value >= 37 && 
value <= 40) || value == 45 || value == 46 || (value >= 48 && value <= 
57) || (value >= 96 && value <= 105) || value == 189 || value == 109) { 
return true; 
} else { 
return false; 




......................... 
폼에서... 한영키를 전환할 때는 이 함수가 통용되지 않는다. 
따라서 폼에서 영문전용으로 해줘야만 한다.. 

<input type="text" name="jumin" onkeydown="javascript:event.returnValue < br /> = isNumeric(event.keyCode);" style="font-family: 굴림; font-size: 9pt; color: rgb(0, 0, 0); "> 

style="ime-mode:disabled" <--- 추가해야 한다.

-------------------------------------------------------- 

자동변경 (한/영 전환가) style="ime-mode:auto" 
영문모드 (한글사용불가능) style="ime-mode:disabled" 

영문모드 (한/영 전환가) style="ime-mode:inactive" 
한글모드 (한/영 전환가) style="ime-mode:active" 

한글모드 (한/영 전환가) style="ime-mode:deactivated" 

-------------------------------------------------------- 
반응형