(0,1,2,3,4,5 ... 9) 0-9와 같은 숫자 만 허용하려는 입력 텍스트 필드가있는 웹 페이지를 만들고 있습니다.

jQuery를 사용하여 어떻게 할 수 있습니까?

^{참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드로 엉망이 된 이전 버전을 나타냅니다.}

jQuery

JSFiddle에서 직접 사용해보십시오 .

이를위한 기본 jQuery 구현은 없지만 <input>다음 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 제외)

jQuery는 실제로 이것을 위해 필요하지 않습니다. 순수한 JavaScript로도 같은 일을 할 수 있습니다. 이 답변을 참조하십시오 .

HTML 5

HTML 5에는 다음과 같은 기본 솔루션이 있지만 ( 사양<input type="number"> 참조 ) 브라우저 지원은 다양합니다.

• 대부분의 브라우저는 입력 할 때가 아니라 양식을 제출할 때만 입력의 유효성을 검사합니다.
• 대부분의 모바일 브라우저는 지원하지 않습니다 step, min및 max특성을.
• 크롬 (버전 71.0.3578.98)는 여전히 사용자가 문자를 입력 할 수 있습니다 e및 E필드에. 이 질문 도 참조하십시오 .
• Firefox (버전 64.0) 및 Edge (EdgeHTML 버전 17.17134) 를 사용하면 필드에 텍스트 를 입력 할 수 있습니다.

w3schools.com에서 직접 사용해보십시오 .

내가 사용하는 기능은 다음과 같습니다.

// 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();

인라인 :

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

눈에 거슬리지 않는 스타일 (jQuery 사용) :

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

간단한 JavaScript 정규식을 사용하여 순수한 숫자를 테스트 할 수 있습니다.

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

입력이 숫자이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

또는 이벤트 키 코드의 경우 아래에서 간단하게 사용하십시오.

     // 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();
    }

다음과 같이 입력 이벤트에 사용할 수 있습니다.

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

그러나이 코드 특권은 무엇입니까?

• 모바일 브라우저에서 작동합니다 (keydown 및 keyCode에 문제가 있음).
• "on"을 사용하고 있기 때문에 AJAX 생성 컨텐츠에서도 작동합니다.
• 붙여 넣기 이벤트와 같이 키 다운보다 성능이 향상되었습니다.

짧고 달콤합니다-30 회 이상의 답변 후에도 많은 관심을 끌지 못할지라도;)

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

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

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

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

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

업데이트 : 여기에 관한 좋은 기사이지만 jQuery 사용 : HTML 텍스트 상자의 입력을 숫자 값으로 제한

$(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

내부 공통 js 파일에서 이것을 사용합니다. 이 동작이 필요한 입력에 클래스를 추가하기 만하면됩니다.

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

나를 위해 더 간단한 것은

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

왜 그렇게 복잡한가? HTML5 패턴 속성이 있으므로 jQuery가 필요하지 않습니다.

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

멋진 점은 휴대 장치에 숫자 키보드가 표시되어 jQuery를 사용하는 것보다 낫다는 것입니다.

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

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

솔루션에 대한 이 링크 를 참조했습니다 . 완벽하게 작동합니다 !!!

HTML5 숫자 입력을 시도 할 수 있습니다 .

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

비 호환 브라우저의 경우 Modernizr 및 Webforms2 대체가 있습니다.

HTML5의 패턴 속성은 요소 값이 확인되는 정규식을 지정합니다.

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

참고 : pattern 속성은 text, search, url, tel, email 및 password 입력 유형과 함께 작동합니다.

• [0-9]는 임의의 정규식 조건으로 대체 될 수 있습니다.

• {1,3}은 최소 1을 나타내고 최대 3 자리를 입력 할 수 있습니다.

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)');

함수 suppressNonNumericInput (event) {

    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
    }
}

다른 솔루션과 달리 사용자가 텍스트를 선택하거나 붙여 넣기를 선택하지 못하게하는 매우 훌륭하고 간단한 솔루션을 찾았습니다. 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

이 JavaScript 함수를 사용할 수 있습니다 :

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에 의존하지 않으므로 인라인 JavaScript로 텍스트 상자에 바인딩 할 수 있습니다.

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

나는 그것이 모든 사람을 도울 것이라고 생각

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

위의 @ 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;
        }
    });
});

얼마 전에 내가 만든 빠른 솔루션이 있습니다. 내 기사에서 더 자세히 읽을 수 있습니다.

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);
});

탭을 허용하려고합니다.

$("#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(); 
        }   
    }
});

다음은 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;
    }
});

이것은 깨지지 않는 것 같습니다.

// 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));
});

숫자 키패드와 탭 키가 작동하는지 확인해야합니다.

 // 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();
                }
            }

나는 조금 도와주고 싶었고, 내 버전, 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);
}

입력 태그 "... input ... id ="price "onkeydown ="return onlyNumbers (event) "..."에 추가하면됩니다.;)

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

    $('.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);
    });

그게 다야 .. 그냥 숫자 야. :) 거의 '흐림'만으로도 작동 할 수 있지만 ...

입력 값이 숫자인지 확인하는 간단한 방법은 다음과 같습니다.

var checknumber = $('#textbox_id').val();

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

Jquery 에서이 방법을 적용하기 만하면 숫자 만 허용하도록 텍스트 상자의 유효성을 검사 할 수 있습니다.

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

이 솔루션을 여기에서 시도 하십시오

HTML5 숫자 입력을 시도 할 수 있습니다.

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

이 입력 태그 요소는 min 속성이 0으로 설정되고 max 속성이 9로 설정 될 때 0에서 9 사이의 값만 갖습니다.

자세한 정보는 http://www.w3schools.com/html/html_form_input_types.asp 를 방문하십시오 .