Jeśli chcesz ograniczyć wprowadzanie danych (w przeciwieństwie do walidacji), możesz pracować z kluczowymi zdarzeniami. coś takiego:

<input type="text" class="numbersOnly" value="" />

I:

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

To natychmiast informuje użytkownika, że nie może wprowadzać znaków Alfa, itp. zamiast później w fazie walidacji.

Nadal będziesz chciał zweryfikować dane, ponieważ dane wejściowe mogą być wypełnione przez wycinanie i wklejanie za pomocą myszy lub autouzupełnianie formularza, które może nie wywołać kluczowych zdarzeń.

Myślałem, że najlepszą odpowiedzią jest ta powyżej, aby to zrobić.

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

Ale Zgadzam się, że trochę boli, że klawisze strzałek i przycisk delete przyczepiają kursor do końca łańcucha (i z tego powodu został mi kopnięty w testach)

Dodałem w prostej zmianie

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

W ten sposób, jeśli zostanie naciśnięty przycisk, który nie spowoduje zmiany tekstu, po prostu go zignoruj. Dzięki temu można trafić Strzałki i usunąć bez skoków do końca, ale to czyści dowolny tekst nieliczbowy.

Jquery.numeric plugin ma kilka błędów, które powiadomiłem autora. W przeglądarce Safari i operze można używać wielu punktów dziesiętnych, a w Operze nie można wpisywać backspace, klawiszy strzałek ani kilku innych znaków sterujących. Potrzebowałem positive integer input, więc skończyło się na pisaniu własnych w końcu.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Koniec z wtyczkami, jQuery zaimplementował własne jQuery.isNumeric() dodano w v1. 7.

jQuery.isNumeric( value )

Określa, czy jego argument jest liczbą.

Wyniki próbek

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Oto przykład, jak powiązać IsNumeric () z detektorem zdarzeń

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

Wtyczka numeric (), o której mowa powyżej, nie działa w Operze(nie można backspace, usunąć lub nawet użyć klawiszy back lub forward).

Poniższy kod zarówno w JQuery, jak i Javascript będzie działał idealnie(i to tylko dwie linie).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Oczywiście jest to tylko dla czystego wejścia numerycznego (plus klawisze backspace, delete, forward / back), ale można je łatwo zmienić na punkty i znaki minus.

Możesz użyć wtyczki walidacji z jej metodąnumber () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Nie ma potrzeby długiego kodu dla ograniczenia wprowadzania liczb, po prostu spróbuj tego kodu.

Akceptuje również poprawne int & float obie wartości.

Javascript Approach

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

JQuery Approach

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

Powyższe odpowiedzi dotyczą najczęściej używanych przypadków-walidacji danych wejściowych jako liczby.

Ale poniżej znajduje się fragment kodu do specjalnego użytku przypadki

• dopuszczanie liczb ujemnych
• wyświetlanie nieprawidłowego naciśnięcia klawisza przed jego usunięciem.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Poniżej jest to, czego używam, aby dosłownie zablokować naciśnięcia klawiszy. Pozwala to tylko na liczby 0-9 i punkt dziesiętny. Jest to bardzo łatwe do zaimplementowania, nie ma dużo kodu i działa jak urok:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Jako niewielką poprawę do tej sugestii, możesz użyć wtyczki walidacji z numerem (), metody numbers , and range . Na przykład, następujące zapewnia, że otrzymasz dodatnią liczbę całkowitą z zakresu od 0 do 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Nie widzisz alfabetów magiczny wygląd i zniknięcie na klucz w dół. To działa również na pastę myszy.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Po raz pierwszy próbowałem rozwiązać to za pomocą jQuery, ale nie byłem zadowolony z niechcianych znaków (niecyfrowych) faktycznie pojawiających się w polu wejściowym tuż przed usunięciem na keyup.

Szukając innych rozwiązań znalazłem to:

Liczby całkowite (nieujemne)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Źródło: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Przykład na żywo: http://jsfiddle.net/u8sZq/

Punkty dziesiętne (non-negative)

Aby zezwolić na pojedynczy punkt dziesiętny, możesz zrobić coś takiego:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Źródło: właśnie to napisałem. Wygląda na to, że działa. Przykład na żywo: http://jsfiddle.net/tjBsF/

Inne dostosowania

• aby umożliwić wpisywanie większej liczby symboli wystarczy dodać je do wyrażenia regularnego, które działa jako podstawowy filtr kodu znaków.
• aby zaimplementować proste ograniczenia kontekstowe, spójrz na bieżącą zawartość (stan) pola wejściowego (oToCheckField.wartość)

Niektóre rzeczy, które mogą Cię zainteresować:

• dozwolony jest tylko jeden punkt dziesiętny
• Zezwalaj na znak minus tylko wtedy, gdy jest umieszczony na początku łańcucha. Umożliwiłoby to uzyskanie liczb ujemnych.

Niedociągnięcia

• pozycja karetki nie jest dostępna wewnątrz funkcji. To znacznie zmniejszyło ograniczenia kontekstowe, które możesz zaimplementować (np. brak dwóch równych kolejnych symboli). Nie wiem, jaki jest najlepszy sposób na dostęp jest.

Wiem, że tytuł prosi o rozwiązania jQuery, ale mam nadzieję, że i tak komuś się to przyda.

Thanks for the post Dave Aaron Smith

Edytowałem Twoją odpowiedź, aby zaakceptować punkt dziesiętny i liczbę z sekcji numer. Ta praca jest dla mnie idealna.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

I zastosuj to na wszystkich wejściach, które chcesz:

$('selector').ForceNumericOnly();

HTML5 obsługuje numer typu wejściowego z globalną obsługą przeglądarki 88%+ według CanIUse od października 2015.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Nie jest to rozwiązanie związane z JQuery, ale zaletą jest to, że w telefonach komórkowych klawiatura Androida będzie zoptymalizowana do wprowadzania numerów.

Alternatywnie można użyć tekstu typu wejściowego z nowym parametrem "pattern". Więcej szczegółów w specyfikacji HTML5.

Myślę, że jest lepsze niż rozwiązanie jquery, ponieważ w tym pytaniu pod warunkiem, że rozwiązanie jquery nie obsługa separatora tysięcy. Jeśli możesz użyć html5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Ta funkcja robi to samo, wykorzystuje niektóre z powyższych pomysłów.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• Pokaż wizualną informację zwrotną (Niepoprawna litera pojawia się przed zniknięciem)
• umożliwia dziesiętne
• łapie wiele"."
• nie ma problemów z lewym / prawym del itp.

/* to jest moja wersja cross browser Jak zezwolić tylko numeryczne (0-9) w HTML inputbox przy użyciu jQuery?
*/

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Możesz użyć autonumerycznego z decorplanit.com . Mają ładne wsparcie dla liczb, a także waluty, zaokrąglenia itp.

Używałem w środowisku IE6, z kilkoma poprawkami css, i był to rozsądny sukces.

Na przykład, klasa css numericInput może być zdefiniowana i może być użyta do dekoracji pól za pomocą liczbowych masek wejściowych.

zaadaptowane ze strony autonumerycznej:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Myślę, że jest to dobry sposób na rozwiązanie tego problemu i jest niezwykle prosty:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Przykład: JSFiddle

Scenariusze objęte

Większość podobnych zaleceń tutaj zawodzi co najmniej jedno z nich lub wymaga dużo kodu, aby pokryć wszystkie te scenariusze.

1. pozwala tylko na 1 punkt dziesiętny.
2. pozwala home, end, i klucze arrow.
3. pozwala na użycie delete i backspace w dowolnym indeks.
4. umożliwia edycję w dowolnym indeksie(o ile dane wejściowe pasują do regex).
5. pozwala ctrl + v I shift + insert na poprawne wejście(to samo z prawym kliknięciem + wklej).
6. nie migocze wartość tekstową, ponieważ zdarzenie keyup nie jest używane.
7. przywraca zaznaczenie po nieprawidłowym wprowadzeniu.

Scenariusze nie powiodły się

• rozpoczynając od 0.5 i usuwając tylko zero nie będzie działać. Można to naprawić zmieniając regex na /^[0-9]*\.?[0-9]*$/ a następnie dodanie zdarzenia rozmycie na początku 0, gdy pole tekstowe zaczyna się od punktu dziesiętnego (w razie potrzeby). Zobacz też scenariusz zaawansowany dla lepszego pomysłu jak to naprawić.

Plugin

Stworzyłem prosty jQuery plugin aby to ułatwić:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

Najlepszym sposobem jest sprawdzenie treści pola tekstowego, gdy traci ono ostrość.

Możesz sprawdzić, czy zawartość jest liczbą, używając wyrażenia regularnego.

LUB możesz użyć wtyczki walidacji, która w zasadzie robi to automatycznie.

Sprawdź ten kod wyszukiwania dla użycia bazy danych:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Po prostu uruchom zawartość przez parsefloat (). Zwróci NaN przy nieprawidłowym wejściu.

To jest fragment, który właśnie zrobiłem (używając części kodu Petera Mortensena / Keitha Bentrupa) dla walidacji procentowej liczby całkowitej na polu tekstowym (jQuery jest wymagane):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Ten kod:

• pozwala na użycie głównych klawiszy numerycznych oraz klawiatury numerycznej.
• sprawdza, aby wykluczyć znaki Shift-numeryczne (np. #, $, %, itp.)
• zastępuje wartości NaN przez 0
• zastępuje przez 100 wartości wyższych niż 100

Znalazłem świetne rozwiązanie tutaj http://ajax911.com/numbers-numeric-field-jquery/

Właśnie zmieniłem "keyup " na" keydown " zgodnie z moim wymaganiem

Jeśli używasz HTML5, nie musisz się starać, aby przeprowadzić walidację. Wystarczy użyć -

<input type="number" step="any" />

Atrybut step pozwala na poprawność punktu dziesiętnego.

Inny sposób na utrzymanie pozycji karetki na wejściu:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Zalety:

1. użytkownik może używać klawiszy strzałek, Backspace, Delete, ...
2. działa, gdy chcesz wkleić liczby

Plunker: demo working

Właśnie znalazłem jeszcze lepszą wtyczkę. Daje Ci o wiele większą kontrolę. Załóżmy, że masz pole DOB, w którym musisz być liczbowe, ale także akceptować znaki " / "lub" -".

To działa świetnie!

Sprawdź na http://itgroup.com.ph/alphanumeric/.

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Ten kod działał na mnie całkiem nieźle, po prostu musiałem dodać 46 w tablicy controlKeys, aby użyć kropki, choć nie uważam, że jest to najlepszy sposób, aby to zrobić ;)

Użyłem tego, z dobrymi wynikami..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Jest to bardzo proste, że mamy już wbudowaną funkcję javascript "isNaN".

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});