Tworzę stronę internetową, na której mam wejściowe pole tekstowe, w którym chcę dopuścić tylko znaki numeryczne, takie jak (0,1,2,3,4,5 ... 9) 0-9.

Jak mogę to zrobić za pomocą jQuery?

^{Uwaga: to jest zaktualizowana odpowiedź. Komentarze poniżej odnoszą się do starej wersji pomieszanej z kodami klawiszy.}

jQuery

Wypróbuj sam na JSFiddle .

Nie ma w tym celu natywnej implementacji jQuery, ale możesz filtrować wartości wejściowe tekstu <input>za pomocą następującej inputFilterwtyczki (obsługuje kopiowanie + wklejanie, przeciąganie + upuszczanie, skróty klawiaturowe, operacje w menu kontekstowym, klawisze bez możliwości wpisywania, pozycja karetki, różne układy klawiatury i wszystkie przeglądarki od 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));

Teraz możesz użyć inputFilterwtyczki, aby zainstalować filtr wejściowy:

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

Zobacz demo JSFiddle, aby uzyskać więcej przykładów filtrów wejściowych. Pamiętaj też, że nadal musisz przeprowadzić weryfikację po stronie serwera!

Czysty JavaScript (bez jQuery)

jQuery nie jest tak naprawdę potrzebny, możesz zrobić to samo z czystym JavaScript. Zobacz tę odpowiedź .

HTML 5

HTML 5 ma natywne rozwiązanie z <input type="number">(patrz specyfikacja ), ale zauważ, że obsługa przeglądarki jest różna:

• Większość przeglądarek zweryfikuje dane wejściowe tylko podczas przesyłania formularza, a nie podczas pisania.
• Większość przeglądarek mobilnych nie obsługują step, mini maxatrybuty.
• Chrome (wersja 71.0.3578.98) nadal pozwala użytkownikowi wprowadzać znaki ei Epole. Zobacz także to pytanie .
• Firefox (wersja 64.0) i Edge (EdgeHTML wersja 17.17134) nadal pozwalają użytkownikowi wprowadzać dowolny tekst w polu.

Wypróbuj sam na w3schools.com .

Oto funkcja, której używam:

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

Następnie możesz dołączyć go do swojej kontroli, wykonując:

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

Inline:

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

Dyskretny styl (z 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">

Możesz po prostu użyć prostego wyrażenia regularnego JavaScript do testowania znaków czysto numerycznych:

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

Zwraca true, jeśli dane wejściowe są numeryczne lub false, jeśli nie.

lub dla kodu zdarzenia, proste użycie poniżej:

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

Możesz użyć zdarzenia wejściowego takiego jak to:

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

Ale czym jest ten przywilej kodu?

• Działa w przeglądarkach mobilnych (problem z keydown i keyCode).
• Działa również na treści generowane przez AJAX, ponieważ używamy „on”.
• Lepsza wydajność niż keydown, na przykład podczas wklejania zdarzenia.

Krótko i słodko - nawet jeśli to nigdy nie przyciągnie uwagi po ponad 30 odpowiedziach;)

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

Użyj funkcji JavaScript isNaN ,

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

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

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

Aktualizacja: A tutaj fajny artykuł mówiący o tym, ale używając jQuery: Ograniczanie wprowadzania danych w polach tekstowych HTML do wartości liczbowych

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

Źródło: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Używam tego w naszym wewnętrznym wspólnym pliku js. Po prostu dodaję klasę do każdego wejścia, które wymaga tego zachowania.

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

Dla mnie jest to prostsze

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

Dlaczego tak skomplikowane? Nie potrzebujesz nawet jQuery, ponieważ istnieje atrybut wzorca HTML5:

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

Fajne jest to, że wyświetla klawiaturę numeryczną na urządzeniach mobilnych, co jest o wiele lepsze niż używanie jQuery.

Możesz zrobić to samo, korzystając z tego bardzo prostego rozwiązania

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

Odniosłem się do tego łącza dla rozwiązania. Działa idealnie !!!

Możesz spróbować wprowadzić numer HTML5 :

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

W przypadku niezgodnych przeglądarek istnieją awarie Modernizr i Webforms2 .

Atrybut wzorca w HTML5 określa wyrażenie regularne, względem którego sprawdzana jest wartość elementu.

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

Uwaga: Atrybut wzorca działa z następującymi typami wprowadzania: tekst, wyszukiwanie, adres URL, tel, e-mail i hasło.

• [0–9] można zastąpić dowolnym warunkiem wyrażenia regularnego.

• {1,3} reprezentuje minimum 1, a maksymalnie 3 cyfry można wprowadzić.

Coś dość prostego przy użyciu 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)');

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

Doszedłem do bardzo dobrego i prostego rozwiązania, które nie przeszkadza użytkownikowi wybierać tekstu ani kopiować wklejania, jak robią to inne rozwiązania. Styl 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

Możesz użyć tej funkcji 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;
        }
    }
}

Możesz powiązać go z polem tekstowym w następujący sposób:

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

Używam powyższego w produkcji i działa idealnie, i jest to przeglądarka. Co więcej, nie zależy od jQuery, więc możesz powiązać go z polem tekstowym za pomocą wbudowanego JavaScript:

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

Myślę, że to pomoże wszystkim

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

Napisałem mój na podstawie powyższego postu @ user261922, nieco zmodyfikowany, aby można było wybrać wszystkie, tab i obsługiwać wiele pól „tylko numer” na tej samej stronie.

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

Oto szybkie rozwiązanie, które stworzyłem jakiś czas temu. możesz przeczytać więcej na ten temat w moim artykule:

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

Chcesz zezwolić na zakładkę:

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

Oto odpowiedź, która korzysta z fabryki widgetów interfejsu użytkownika jQuery. Możesz łatwo dostosować, które postacie są dozwolone.

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

Pozwoliłoby to na liczby, znaki liczbowe i kwoty w dolarach.

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

To wydaje się nie do złamania.

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

Musisz upewnić się, że klawiatura numeryczna i klawisz tab również działają

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

Chciałem trochę pomóc i stworzyłem moją wersję, onlyNumbersfunkcję ...

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

Wystarczy dodać tag wejściowy „... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." i gotowe;)

Chciałbym również odpowiedzieć :)

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

To wszystko ... tylko liczby. :) Prawie może działać tylko z „rozmyciem”, ale ...

Prostym sposobem sprawdzenia, czy wprowadzana wartość jest liczbą, jest:

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

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

Wystarczy zastosować tę metodę w Jquery, aby sprawdzić poprawność pola tekstowego i zaakceptować tylko numer.

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

Wypróbuj to rozwiązanie tutaj

Możesz spróbować wprowadzić numer HTML5:

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

Ten element znacznika wejściowego przyjąłby teraz wartość tylko od 0 do 9, ponieważ atrybut min ustawiony jest na 0, a atrybut max ustawiony na 9.

Więcej informacji na stronie http://www.w3schools.com/html/html_form_input_types.asp