[JQUERY] 어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는?

어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는?

해결법

1. ---

   1.참고 :이 업데이트 된 대답이다. 댓글은 아래의 키 코드 주위에 엉망이 이전 버전을 참조하십시오.

   참고 :이 업데이트 된 대답이다. 댓글은 아래의 키 코드 주위에 엉망이 이전 버전을 참조하십시오.

   JSFiddle에 직접보십시오.

   지원은 드래그 + 드롭, 키보드 단축키, 상황에 맞는 메뉴 조작, 비 typeable 키를 붙여 넣기 + 복사 (이이에 대한 기본 jQuery를 구현 없지만, 다음과 같은 inputFilter 플러그인으로 텍스트 <입력>의 입력 값을 필터링 할 수 있습니다 위치, 다른 키보드 레이아웃, 그리고 IE 9 이후의 모든 브라우저를) 캐럿 :

   // Restricts input for the set of matched elements to the given inputFilter function.
   (function($) {
     $.fn.inputFilter = function(inputFilter) {
       return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
         if (inputFilter(this.value)) {
           this.oldValue = this.value;
           this.oldSelectionStart = this.selectionStart;
           this.oldSelectionEnd = this.selectionEnd;
         } else if (this.hasOwnProperty("oldValue")) {
           this.value = this.oldValue;
           this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
         } else {
           this.value = "";
         }
       });
     };
   }(jQuery));
   

   이제 입력 필터를 설치 inputFilter 플러그인을 사용할 수 있습니다 :

   $(document).ready(function() {
     $("#myTextBox").inputFilter(function(value) {
       return /^\d*$/.test(value);    // Allow digits only, using a RegExp
     });
   });
   

   이상의 입력 필터 예는 JSFiddle 데모를 참조하십시오. 또한 당신은 여전히 ​​서버 측 유효성 검사를 수행해야합니다!

   jQuery를 실제로이 필요하지 않습니다, 당신은뿐만 아니라 순수 자바 스크립트와 같은 일을 할 수 있습니다. 이 답변을 참조하십시오.

   HTML 5는 <입력 유형 = "숫자"> (사양 참조)하지만, 브라우저 지원은 다양합니다 네이티브 솔루션을 제공합니다 :

   w3schools.com에 직접보십시오.

2. ---

   2.여기에 기능 I 사용은 다음과 같습니다

   여기에 기능 I 사용은 다음과 같습니다

   // Numeric only control handler
   jQuery.fn.ForceNumericOnly =
   function()
   {
       return this.each(function()
       {
           $(this).keydown(function(e)
           {
               var key = e.charCode || e.keyCode || 0;
               // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
               // home, end, period, and numpad decimal
               return (
                   key == 8 || 
                   key == 9 ||
                   key == 13 ||
                   key == 46 ||
                   key == 110 ||
                   key == 190 ||
                   (key >= 35 && key <= 40) ||
                   (key >= 48 && key <= 57) ||
                   (key >= 96 && key <= 105));
           });
       });
   };
   

   그런 다음을 수행하여 컨트롤에 첨부 할 수 있습니다 :

   $("#yourTextBoxName").ForceNumericOnly();
   

3. ---

   3.인라인 :

   인라인 :

   (jQuery로) 겸손한 스타일 :

   $ ( '입력 [NAME = "숫자"]).의 keyup (함수 (E) { 경우 (/\D/g.test(this.value)) { // 입력 값으로부터 필터 이외의 숫자. this.value = this.value.replace (/ \ D / g ''); } }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

4. ---

   4.당신은 순전히 숫자를 테스트하는 간단한 자바 스크립트 정규 표현식을 사용할 수 있습니다 :

   당신은 순전히 숫자를 테스트하는 간단한 자바 스크립트 정규 표현식을 사용할 수 있습니다 :

   /^[0-9]+$/.test(input);
   

   입력이 숫자 또는 그렇지 않은 경우는 false 인 경우에 true를 돌려줍니다.

   또는 이벤트 키 코드에 대한 간단한 사용하기 :

        // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
       if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
            // Allow: Ctrl+A
           (e.keyCode == 65 && e.ctrlKey === true) || 
            // Allow: home, end, left, right
           (e.keyCode >= 35 && e.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
       }
   
       var charValue = String.fromCharCode(e.keyCode)
           , valid = /^[0-9]+$/.test(charValue);
   
       if (!valid) {
           e.preventDefault();
       }
   

5. ---

   5.이 같은 입력 이벤트에 사용할 수 있습니다 :

   이 같은 입력 이벤트에 사용할 수 있습니다 :

   $(document).on("input", ".numeric", function() {
       this.value = this.value.replace(/\D/g,'');
   });
   

   그러나,이 코드의 특권은 무엇인가?

6. ---

   6.짧고 달콤한 -이 30 개 + 답변 후 많은 관심을 찾을 수 없을 경우에도)

   짧고 달콤한 -이 30 개 + 답변 후 많은 관심을 찾을 수 없을 경우에도)

     $('#number_only').bind('keyup paste', function(){
           this.value = this.value.replace(/[^0-9]/g, '');
     });
   

7. ---

   7.를 사용하여 자바 스크립트, 때는 isNaN를 작동

   를 사용하여 자바 스크립트, 때는 isNaN를 작동

   if (isNaN($('#inputid').val()))
   

   (때는 isNaN (document.getElementById를 ( 'inputid'). 발 ()))의 경우

   if (isNaN(document.getElementById('inputid').value))
   

   최신 정보: 그리고 여기에 멋진 기사는 그것에 대해 이야기하지만, jQuery를 사용하여 : 숫자 값에 HTML 텍스트 상자에 입력 제한

8. ---

   8.

   $(document).ready(function() {
       $("#txtboxToFilter").keydown(function(event) {
           // Allow only backspace and delete
           if ( event.keyCode == 46 || event.keyCode == 8 ) {
               // let it happen, don't do anything
           }
           else {
               // Ensure that it is a number and stop the keypress
               if (event.keyCode < 48 || event.keyCode > 57 ) {
                   event.preventDefault(); 
               }   
           }
       });
   });
   

   출처 : http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

9. ---

   9.나는 우리의 내부 공통의 js 파일에 사용합니다. 난 그냥이 동작을 필요로 모든 입력에 클래스를 추가합니다.

   나는 우리의 내부 공통의 js 파일에 사용합니다. 난 그냥이 동작을 필요로 모든 입력에 클래스를 추가합니다.

   $(".numericOnly").keypress(function (e) {
       if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
   });
   

10. ---

    10.나를 위해 간단한 일입니다

    나를 위해 간단한 일입니다

    jQuery('.plan_eff').keyup(function () {     
      this.value = this.value.replace(/[^1-9\.]/g,'');
    });
    

11. ---

    11.왜 그렇게 복잡해? HTML5 패턴 속성이 있기 때문에 당신은 jQuery를 필요가 없습니다

    왜 그렇게 복잡해? HTML5 패턴 속성이 있기 때문에 당신은 jQuery를 필요가 없습니다

    <input type="text" pattern="[0-9]*">
    

    멋진 일이 더 나은 jQuery를 사용하는 것보다 방법입니다 모바일 장치에 숫자 키보드를 가져온다는 것이다.

12. ---

    12.이 매우 간단한 솔루션을 사용하여 동일한 작업을 수행 할 수 있습니다

    이 매우 간단한 솔루션을 사용하여 동일한 작업을 수행 할 수 있습니다

    $ ( "input.numbers"). 키를 누를 때 (함수 (이벤트) { 반환 /\d/.test(String.fromCharCode(event.keyCode)); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    나는 솔루션에 대한 링크 참조. 그것은 완벽하게 작동합니다!

13. ---

    13.당신은 HTML5 번호 입력을 시도 할 수 있습니다 :

    당신은 HTML5 번호 입력을 시도 할 수 있습니다 :

    <input type="number" value="0" min="0"> 
    

    비 호환 브라우저의 모더 나이저와 Webforms2 폴백 (fallback)이있다.

14. ---

    14.HTML5에 패턴 속성은 요소의 값에 대해 확인하는 정규 표현을 지정한다.

    HTML5에 패턴 속성은 요소의 값에 대해 확인하는 정규 표현을 지정한다.

      <input  type="text" pattern="[0-9]{1,3}" value="" />
    

    참고 : 다음과 같은 입력 유형과 패턴 속성 작품 : 텍스트, 검색, URL, 전화, 이메일 및 암호를 입력합니다.

15. ---

    15.매우 간단 뭔가 jQuery.validate를 사용하여

    매우 간단 뭔가 jQuery.validate를 사용하여

    $(document).ready(function() {
        $("#formID").validate({
            rules: {
                field_name: {
                    numericOnly:true
                }
            }
        });
    });
    
    $.validator.addMethod('numericOnly', function (value) {
           return /^[0-9]+$/.test(value);
    }, 'Please only enter numeric values (0-9)');
    

16. ---

    16.suppressNonNumericInput 함수 (이벤트) {

    suppressNonNumericInput 함수 (이벤트) {

        if( !(event.keyCode == 8                                // backspace
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
            ) {
                event.preventDefault();     // Prevent character input
        }
    }
    

17. ---

    17.나는 텍스트를 선택에서 사용자를 방해하지 않거나 다른 솔루션들처럼 붙여 복사 아주 좋은 및 간단한 솔루션에왔다. jQuery를 스타일 :

    나는 텍스트를 선택에서 사용자를 방해하지 않거나 다른 솔루션들처럼 붙여 복사 아주 좋은 및 간단한 솔루션에왔다. jQuery를 스타일 :

    $("input.inputPhone").keyup(function() {
        var jThis=$(this);
        var notNumber=new RegExp("[^0-9]","g");
        var val=jThis.val();
    
        //Math before replacing to prevent losing keyboard selection 
        if(val.match(notNumber))
        { jThis.val(val.replace(notNumber,"")); }
    }).keyup(); //Trigger on page load to sanitize values set by server
    

18. ---

    18.이 자바 스크립트 기능을 사용할 수 있습니다 :

    이 자바 스크립트 기능을 사용할 수 있습니다 :

    function maskInput(e) {
        //check if we have "e" or "window.event" and use them as "event"
            //Firefox doesn't have window.event 
        var event = e || window.event 
    
        var key_code = event.keyCode;
        var oElement = e ? e.target : window.event.srcElement;
        if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
            if ((key_code > 47 && key_code < 58) ||
                (key_code > 95 && key_code < 106)) {
    
                if (key_code > 95)
                     key_code -= (95-47);
                oElement.value = oElement.value;
            } else if(key_code == 8) {
                oElement.value = oElement.value;
            } else if(key_code != 9) {
                event.returnValue = false;
            }
        }
    }
    

    그리고 당신은이처럼 텍스트 상자에 바인딩 할 수 있습니다 :

    $(document).ready(function() {
        $('#myTextbox').keydown(maskInput);
    });
    

    내가 생산에 위의를 사용하고, 그것은 완벽하게 작동하고, 크로스 브라우저입니다. 또한, 인라인 자바 스크립트를 사용하여 텍스트 상자에 바인딩 할 수 있도록 jQuery를에 의존하지 않는다 :

    <input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
    

19. ---

    19.나는 모든 사람을 도움이 될 것입니다 생각

    나는 모든 사람을 도움이 될 것입니다 생각

      $('input.valid-number').bind('keypress', function(e) { 
    return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
      })
    

20. ---

    20.여기에 내가 몇 시간 전에 작성된 빠른 해결책이다. 당신은 나의 기사에 대한 자세한 내용을보실 수 있습니다 :

    여기에 내가 몇 시간 전에 작성된 빠른 해결책이다. 당신은 나의 기사에 대한 자세한 내용을보실 수 있습니다 :

    http://ajax911.com/numbers-numeric-field-jquery/

    $("#textfield").bind("keyup paste", function(){
        setTimeout(jQuery.proxy(function() {
            this.val(this.val().replace(/[^0-9]/g, ''));
        }, $(this)), 0);
    });
    

21. ---

    21.난 당신이 모든 탭을 선택하고 같은 페이지에 여러 개의 "숫자 전용"필드를 처리 할 수 ​​있도록 나의 약간 수정 위 @ user261922의 게시물의 기반으로 썼다.

    난 당신이 모든 탭을 선택하고 같은 페이지에 여러 개의 "숫자 전용"필드를 처리 할 수 ​​있도록 나의 약간 수정 위 @ user261922의 게시물의 기반으로 썼다.

    var prevKey = -1, prevControl = '';
    $(document).ready(function () {
        $(".OnlyNumbers").keydown(function (event) {
            if (!(event.keyCode == 8                                // backspace
                || event.keyCode == 9                               // tab
                || event.keyCode == 17                              // ctrl
                || event.keyCode == 46                              // delete
                || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
                || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
                || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
                || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
            ) {
                event.preventDefault();     // Prevent character input
            }
            else {
                prevKey = event.keyCode;
                prevControl = event.currentTarget.id;
            }
        });
    });
    

22. ---

    22.당신은 탭을 허용 할 것입니다 :

    당신은 탭을 허용 할 것입니다 :

    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
    

23. ---

    23.여기에 jQuery를 UI 위젯 팩토리를 사용하는 대답이다. 당신은 쉽게 허용되는 문자를 사용자 정의 할 수 있습니다.

    여기에 jQuery를 UI 위젯 팩토리를 사용하는 대답이다. 당신은 쉽게 허용되는 문자를 사용자 정의 할 수 있습니다.

    $('input').numberOnly({
        valid: "0123456789+-.$,"
    });
    

    즉 숫자, 숫자 기호와 달러 금액을 허용합니다.

    $.widget('themex.numberOnly', {
        options: {
            valid : "0123456789",
            allow : [46,8,9,27,13,35,39],
            ctrl : [65],
            alt : [],
            extra : []
        },
        _create: function() {
            var self = this;
    
            self.element.keypress(function(event){
                if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
                {
                    return;
                }
                if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
                {
                    return;
                }
                if(event.altKey && self._codeInArray(event,self.options.alt))
                {
                    return;
                }
                if(!event.shiftKey && !event.altKey && !event.ctrlKey)
                {
                    if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                    {
                        return;
                    }
                }
                event.preventDefault(); 
            });
        },
    
        _codeInArray : function(event,codes) {
            for(code in codes)
            {
                if(event.keyCode == codes[code])
                {
                    return true;
                }
            }
            return false;
        }
    });
    

24. ---

    24.이 깨지지 않는 것 같다.

    이 깨지지 않는 것 같다.

    // Prevent NULL input and replace text.
    $(document).on('change', 'input[type="number"]', function (event) {
        this.value = this.value.replace(/[^0-9\.]+/g, '');
        if (this.value < 1) this.value = 0;
    });
    
    // Block non-numeric chars.
    $(document).on('keypress', 'input[type="number"]', function (event) {
        return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
    });
    

25. ---

    25.필요는 당신이 숫자 키패드와 탭 키가 너무 작업이 있는지 확인하기

    필요는 당신이 숫자 키패드와 탭 키가 너무 작업이 있는지 확인하기

     // Allow only backspace and delete
                if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                    // let it happen, don't do anything
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
    
                    }
                    else {
                        event.preventDefault();
                    }
                }
    

26. ---

    26.나는 약간의 도움을 원하고, 내 버전을 만들었다는 onlyNumbers가 작동 ...

    나는 약간의 도움을 원하고, 내 버전을 만들었다는 onlyNumbers가 작동 ...

    function onlyNumbers(e){
        var keynum;
        var keychar;
    
        if(window.event){  //IE
            keynum = e.keyCode;
        }
        if(e.which){ //Netscape/Firefox/Opera
            keynum = e.which;
        }
        if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
           (event.keyCode >= 96 && event.keyCode <= 105)))return true;
    
        if(keynum == 110 || keynum == 190){
            var checkdot=document.getElementById('price').value;
            var i=0;
            for(i=0;i<checkdot.length;i++){
                if(checkdot[i]=='.')return false;
            }
            if(checkdot.length==0)document.getElementById('price').value='0';
            return true;
        }
        keychar = String.fromCharCode(keynum);
    
        return !isNaN(keychar);
    }
    

    그냥 "... ... 입력 ID를 ="입력 태그에 추가 가격 "onKeyDown에 ="반환 onlyNumbers (이벤트) "..."하면 모든 작업이 완료된다)

27. ---

    27.나는 또한 대답하고 싶습니다 :)

    나는 또한 대답하고 싶습니다 :)

        $('.justNum').keydown(function(event){
            var kc, num, rt = false;
            kc = event.keyCode;
            if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
            return rt;
        })
        .bind('blur', function(){
            num = parseInt($(this).val());
            num = isNaN(num) ? '' : num;
            if(num && num < 0) num = num*-1;
            $(this).val(num);
        });
    

    그게 다야 ... 단지 숫자. :) 거의 그것은 바로 '흐림'와 함께 작동 할 수 있지만 ...

28. ---

    28.값을 입력 수표 간단한 방법은 숫자가이다 :

    값을 입력 수표 간단한 방법은 숫자가이다 :

    var checknumber = $('#textbox_id').val();
    
        if(jQuery.isNumeric(checknumber) == false){
            alert('Please enter numeric value');
            $('#special_price').focus();
            return;
        }
    

29. ---

    29.그냥 JQuery와에이 방법을 적용해야하고 당신은 단지 수를 허용하도록 텍스트 상자의 유효성을 검사 할 수 있습니다.

    그냥 JQuery와에이 방법을 적용해야하고 당신은 단지 수를 허용하도록 텍스트 상자의 유효성을 검사 할 수 있습니다.

    function IsNumberKeyWithoutDecimal(element) {    
    var value = $(element).val();
    var regExp = "^\\d+$";
    return value.match(regExp); 
    }
    

    여기에이 솔루션을 사용해보십시오

30. ---

    30.당신은 HTML5 번호 입력을 시도 할 수 있습니다 :

    당신은 HTML5 번호 입력을 시도 할 수 있습니다 :

    <input type="number" placeholder="enter the number" min="0" max="9">
    

    이 입력 된 태그 요소는 이제 0 ~ 9 사이의 값을 취할 것 분 속성이 0으로 설정되고, 최대로 9 속성으로 설정된다.

    방문에 대한 자세한 내용은 http://www.w3schools.com/html/html_form_input_types.asp

from https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery by cc-by-sa and MIT license