Jak zezwolić tylko na wartości liczbowe (0-9) w polu wejściowym HTML za pomocą jQuery?

901

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?

Prashant
źródło
73
Pamiętaj, że nie możesz polegać na sprawdzaniu poprawności po stronie klienta - musisz także sprawdzić poprawność na serwerze, na wypadek, gdyby użytkownik wyłączył JavaScript lub nie używa przeglądarki zgodnej z JavaScript.
cjk
45
czy zastanawiałeś się nad HTML5? <typ wejścia = „liczba” />. z atrybutami min i max możesz także ograniczyć wprowadzanie danych
ZX12R 11.04. o
5
Myślę, że powinieneś sprawdzić wartości wejściowe w zdarzeniu keyup i nie sprawdzać kodów dostępu, ponieważ jest on znacznie bardziej niezawodny w odniesieniu do różnic w klawiaturach, a co nie.
Richard
13
W pełni zgadzam się z Richardem: nie używaj kodów dostępu. Akceptowana odpowiedź nie działa na przykład na francuskich klawiaturach, ponieważ musisz nacisnąć „Shift”, aby wpisać cyfry na tych klawiaturach. Kody są zbyt ryzykowne, IMHO.
MiniQuark,
3
@ ZX12R Nie działa w żadnej aktualnej wersji IE. Dobrze jest używać najnowszego kodu do własnych celów, aby zachować świeżość, ale tak naprawdę nie jest to opcja dla prawie każdego profesjonalnego projektu. caniuse.com/#feat=input-number
Eric

Odpowiedzi:

1260

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 .

emkey08
źródło
45
Dzięki! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190, jeśli chcesz miejsc po przecinku
Michael L Watson
9
Dodaj kody 37 i 39, aby umożliwić nawigację w lewo i prawo w polu txt, na przykład: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen
22
ooo, właśnie odebrałem problem od naszych testerów. Musisz uniemożliwić użytkownikowi przytrzymanie klawisza Shift i naciśnięcie klawiszy numerycznych, w przeciwnym razie wprowadzanie pozwoli! @ # $% ^ & * ()
Allen Rice
6
Potwierdzono zmianę + błąd. Ponadto ALT + klawiatura numeryczna pozwala na prawie wszystko (tj. Alt + 321 = A, Alt + 322 = B itp.). Kolejny przypadek sprawdzania poprawności po stronie serwera.
Anthony Queen
140
Naprawdę nie zgadzam się z tą odpowiedzią: gra z kodami jest zbyt ryzykowna, ponieważ nie możesz być pewien, jaki jest układ klawiatury. Na przykład na klawiaturach francuskich użytkownicy muszą naciskać klawisz shift, aby wpisać cyfry. Więc ten kod w ogóle nie będzie działać. Więc przejdź do sprawdzania poprawności zamiast tego hackowania kodu.
MiniQuark,
182

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();
Kelsey
źródło
2
uznałem to za przydatne, ale znalazłem denerwujący „błąd”. kiedy używam tego na moim komputerze iMac, pozwala to na użycie litery, np. ai e. wygląda na to, że numery na klawiaturze komputera to litery na komputerze iMac, a klawiatura komputera Mac jest taka sama jak zwykłe cyfry. ktoś wie, jak to zrobić na komputerze Mac i PC?
Volmar,
3
Klawisze „Strona główna”, „Koniec” też nie działają. To jest lepsze rozwiązanie, które zasugerował Peter: west-wind.com/weblog/posts/2011/Apr/22/…
bman
Dlaczego istnieje return this.each(function() ?
powtac
2
@powtac - możesz wywołać .ForceNumericOnly () na wielu obiektach. Na przykład ... $ („input [type = 'text']”). ForceNumericOnly ()
Oliver Pearmain
1
@powtac the eachfrom return this.each(function()pozwala na wiele obiektów, jak powiedział HaggleLad, a returnczęść polega na zwróceniu obiektu jQuery z powrotem do dzwoniącego, aby umożliwić tworzenie łańcuchów, takich jak$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos
149

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

Patrick Fisher
źródło
2
Spowoduje to przesunięcie kursora na koniec, nawet jeśli użytkownik naciska lewy klawisz strzałki.
Phrogz
1
@phrogz, spróbuj tego: onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher
Działa to doskonale i zapobiega Shift + numer w przeciwieństwie do powyższych.
Nick Hartley,
5
@ mhenry1384 To jest oczekiwane zachowanie. Uważam, że jest to miła opinia, ale jeśli ci się to nie podoba, to kluczowym podejściem do kodu byłoby to, czego szukasz.
Patrick Fisher
2
Możesz zmodyfikować, aby /[^0-9]|^0+(?!$)/gzapobiec wiodącej serii zer.
Johny Skovdal
105

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();
    }
Umang
źródło
11
Zobacz moją odpowiedź na wdrożenie tego podejścia.
Patrick Fisher
czy nie zajmie to mniej czasu procesora, aby sprawdzić numeryczne naciśnięcie klawisza, niż sprawdzenie wyrażenia regularnego?
andrsnn
87

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.
Hamid Afarinesh Far
źródło
6
Wydaje mi się, że jest to znacznie bardziej niezawodne (i prostsze) rozwiązanie niż zaakceptowana odpowiedź.
Jeremy Harris
Jeszcze prostsze, jeśli używasz replace (/ \ D / g, '')
Alfergon 21.01.16
cześć, jak mogę zapewnić wartość liczbową z decimalprzedziałem od 0.0do 24.0Nie jestem w stanie pozwolić, aby dostała się do.
transformatora
Sugerowałbym użyciethis.value = Number(this.value.replace(/\D/g, ''));
HasanG
Dobra odpowiedź, pozwala łatwo przełączać, czy dane wejściowe są numeryczne, czy nie, przełączając klasę
raklos
55

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, '');
  });
Rid Iculous
źródło
5
Zastąpiłbym keyup przez wprowadzanie, w przeciwnym razie możesz przytrzymać naciśniętą literę, a następnie kliknąć, aby usunąć fokus z pola tekstowego i pozostawi tekst bez zmian. dane wejściowe zapewniają, że tak się nie stanie
WizLiz
Dzięki za wyrażenie regularne - ale jest to nieco lepsza procedura obsługi zdarzeń: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] / g, '');});
BradM
3
FYI - Pytanie nie wymagało tego, ale nie pozwala na ułamki dziesiętne (np. 12,75). Wiązanie „danych wejściowych” zamiast „keyup” sprawia, że ​​UX jest płynniejszy, zamiast widzieć jego postać przez ułamek sekundy, a następnie ją usuwać.
Paul
44

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

Amr Elgarhy
źródło
40
Cóż ... „Nie używa JQuery”, z wyjątkiem tej części twojego przykładu, która używa JQuery ...
GalacticCowboy
document.getElementById('inputid').val()koleś ... to wciąż jquery. .val()to kwestia jquery. use.value
mpen 18.03.11
cześć, w jaki sposób mogę zapewnić wartość liczbową z decimalprzedziału od 0.0do 24.0Nie jestem w stanie pozwolić na wejście do .
transformatora
28
$(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

Ivar
źródło
6
Wow, opróżnij oba bloki „if” i magiczne liczby! Właśnie zwymiotowałem trochę w usta. : D Ale poważnie, po co popadać w te wszystkie kłopoty, skoro można po prostu dopasować dane wejściowe do wyrażenia regularnego /^[.\d]+$/? A co oznacza „8”?
Alan Moore
@Alan: Haha, nie mam pojęcia - skopiowałem bezpośrednio ze źródła. Zamiast tego napisałbym „if (event.keyCode! = 46 && event.keyCode! = 8)” lub użyłem wyrażenia regularnego, jak powiedziałeś. Przypuszczam, że 8 reprezentuje klawisz usuwania.
Ivar
4
Spróbuj na przykład nacisnąć Shift + 8 - Twoja weryfikacja pozwoli * wejść
Anton
To jest miłe. Byłoby znacznie lepiej, jeśli obsługuje klawisz Shift + cyfry (znaki specjalne takie jak! @ # $% ^ ..)
Shyju
27

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;
});
Mijk
źródło
1
Ładny, elegancki i przydatny kod! Dzięki. Ale musisz dodać zdarzenia związane z keyup i keydown.
Silvio Delgado
25

Dla mnie jest to prostsze

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
Summved Jain
źródło
7
Musisz tylko upewnić się, że używasz this.value.replace(/[^0-9\.]/g,'');wymagań OP 0-9
Chalise
24

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.

Gość
źródło
2
To powinno mieć znacznie więcej głosów. Jeśli już, możesz również dodać regex dla przeglądarek innych niż HTML5 - ale sprawdzanie poprawności danych powinno być obsługiwane po stronie serwera.
Markus
wygląda na to, że jest już dobrze obsługiwany przez większość przeglądarek, więc obsługa modernizatora nie jest tak ważna: caniuse.com/#search=pattern Safari działa bardzo dobrze, nawet jeśli jest wymienione jako częściowo obsługiwane w tej witrynie. Spróbuj!
gość
@ gość Dziękuję bardzo za to. Najszybsza i najłatwiejsza odpowiedź! Najlepsza odpowiedź moim zdaniem.
BinaryJoe01
19

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

Ganesh Babu
źródło
Może to lepiej /\d|\./ zezwolić. liczby dziesiętne
Zango,
To działa idealnie w crome. Ale nie w Mozilla FireFox
Kirataka
cześć, jak mogę zapewnić wartość liczbową z decimalprzedziałem od 0.0do 24.0Nie jestem w stanie pozwolić na wejście do .
transformatora
nie działa z kopiowaniem wklej
mrid
14

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

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

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

Vitalii Fedorenko
źródło
wciąż pozwala to na przecinki
apfz
14

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ć.

vickisys
źródło
cześć, jak mogę zapewnić wartość liczbową z decimalprzedziałem od 0.0do 24.0Nie jestem w stanie pozwolić na wejście do .
transformatora
1
@transformer spróbuj tego <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" step = "0.01">
vickisys 14.04.17
11

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)');
Adrian
źródło
8

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
    }
}
użytkownik261922
źródło
cześć, jak mogę zapewnić wartość liczbową z decimalprzedziałem od 0.0do 24.0Nie jestem w stanie pozwolić na wejście do .
transformatora
8

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
Vincent
źródło
Hej, korzystam z tego, ale tak naprawdę szukam, aby pozwolić mu na kropkę taką jak 1.2 lub
3.455
8

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()"/>
karim79
źródło
To się nie udaje, gdy ktoś wkleja tekst nieliczbowy na wejściu. Jakiś pomysł, jak moglibyśmy to przezwyciężyć? Nie mogę się tym zająć.
Kiran Ruth R
7

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 ;
  })
Jak gdyby
źródło
zapominasz o wprowadzaniu z klawiatury. Obejmuje to, że:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo
6

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;
        }
    });
});
jamesbar2
źródło
6

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);
});
Dima
źródło
6

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(); 
        }   
    }
});
ngwanevic
źródło
6

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;
    }
});
Mathew Foscarini
źródło
czy zapewnia to $, a następnie + - jako pierwsze lub pierwsze / drugie znaki, a następnie tylko 1 przecinek dziesiętny?
Gordon
6

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));
});
Jonathan
źródło
5

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();
                }
            }
Coppermill
źródło
5

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

awarii
źródło
5

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

Pedro Soares
źródło
5

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;
    }
Pragnesh Rupapara
źródło
5

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

Jitender Kumar
źródło
5

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

kkk
źródło