Użyj tego DOM

<input type='text' onkeypress='validate(event)' />

I ten skrypt

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Długo i ciężko Szukałem dobrej odpowiedzi na to, i desperacko potrzebujemy <input type="number", ale krótko mówiąc, te 2 są najbardziej zwięzłymi sposobami, jakie mogłem wymyślić:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Jeśli nie podoba Ci się nieakceptowana postać pokazująca się przez ułamek sekundy przed usunięciem, metoda poniżej jest moim rozwiązaniem. Zwróć uwagę na liczne dodatkowe warunki, ma to na celu uniknięcie wyłączania wszelkiego rodzaju nawigacji i skrótów klawiszowych. Jeśli ktoś wie, jak to zagęścić, daj nam znać!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Tutaj jest prosty, który pozwala na dokładnie jeden dziesiętny, ale nie więcej:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

Większość odpowiedzi tutaj wszystkie mają słabość do używania key-events .

Wiele odpowiedzi ograniczyłoby możliwość wyboru tekstu za pomocą makr klawiatury, kopiowania+wklejania i innych niechcianych zachowań, inne zdają się zależeć od konkretnych wtyczek jQuery, które zabijają muchy karabinami maszynowymi.

To proste rozwiązanie wydaje się działać najlepiej dla mnie cross platform, niezależnie od mechanizmu wprowadzania (naciśnięcie klawisza, kopiuj+wklej, rightclick kopiuj+wklej, mowa-tekst itp.). Wszystkie teksty makra klawiatury wyboru nadal działały, a nawet ograniczały możliwość ustawiania przez skrypt wartości nieliczbowej.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

HTML5 mA <input type=number>, co brzmi dobrze dla Ciebie. Obecnie tylko Opera obsługuje go natywnie, ale istnieje Projekt , który ma implementację JavaScript.

I jeszcze jeden przykład, który świetnie mi się sprawdza:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Dołącz również do zdarzenia keypress

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

I HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Oto przykład jsFiddle

HTML5 obsługuje wyrażenia regularne, więc możesz użyć tego:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Ostrzeżenie: niektóre przeglądarki jeszcze tego nie obsługują.

Zdecydowałem się użyć kombinacji dwóch wymienionych tutaj odpowiedzi tj.

<input type="number" />

I

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

Dodatkowe można dodać przecinek, kropkę i minus (,.-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

2 rozwiązania:

Użyj walidatora formularza (na przykład z jQuery validation plugin)

Wykonaj sprawdzenie podczas zdarzenia onblur (tzn. gdy użytkownik opuści pole) pola wejściowego za pomocą wyrażenia regularnego:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

To takie proste....

// w funkcji JavaScript (może używać HTML lub PHP).

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

W formularzu wpisz:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Z wejściem max. (Powyższe pozwala na 12-cyfrowy numer)

Bezpieczniejszym podejściem jest sprawdzanie wartości wejścia, zamiast przejmowania naciśnięć klawiszy i prób filtrowania kodów klawiszy.

W ten sposób użytkownik może swobodnie używać strzałek na klawiaturze, klawiszy modyfikujących, backspace, kasować, używać niestandardowych klawiatur, używać myszy do wklejania, przeciągać i upuszczać tekst, nawet używać wejść ułatwień dostępu.

Poniższy skrypt umożliwia użycie liczb dodatnich i ujemnych

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: usunąłem moją starą odpowiedź, bo myślę, że jest przestarzałe.

Możesz użyć do tego wzoru:

<input id="numbers" pattern="[0-9.]+" type="number">

Tutaj możesz zobaczyć pełne wskazówki dotyczące interfejsu strony mobilnej .

Proszę znaleźć poniżej wymienione rozwiązanie. W tym uĺźytkowniku moĹźna wpisaÄ ‡ tylko wartoĹ " Ä ‡ numeric, takĹźe uĺźytkownik nie moĹźecopy, paste, drag i drop input.

Dozwolone Znaki

0,1,2,3,4,5,6,7,8,9

Niedozwolone postacie i postacie poprzez zdarzenia

• wartość alfabetyczna
• specjalne znaki
• Kopia
• Wklej
• Drag
• Drop

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Jeszcze jeden przykład, gdzie Można Dodać tylko cyfry w polu wejściowym, nie można litery

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Jeśli chcesz zasugerować urządzenie (może telefon komórkowy) pomiędzy alfą lub cyfrą, możesz użyć <input type="number">.

Krótka i słodka implementacja używająca jQuery i replace () zamiast patrzenia na zdarzenie.keyCode lub event.które:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Tylko mały efekt uboczny, że wpisana litera pojawia się chwilowo i CTRL / CMD + a wydaje się zachowywać trochę dziwnie.

Łatwym sposobem rozwiązania tego problemu jest zaimplementowanie funkcji jQuery do walidacji za pomocą regex znaków wpisanych w polu tekstowym, na przykład:

Twój kod html:

<input class="integerInput" type="text">

I funkcja js za pomocą jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

input type="number" jest atrybutem HTML5.

W drugim przypadku to ci pomoże:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Kod JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Kod HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

Działa idealnie, ponieważ kod klawisza backspace to 8, a wyrażenie regex na to nie pozwala, więc jest to łatwy sposób na ominięcie błędu:)

Wystarczy użyć type= "number" Teraz ten atrybut obsługuje większość przeglądarek

<input type="number" maxlength="3" ng-bind="first">

Tylko inny wariant z jQuery używając

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Widziałem kilka świetnych odpowiedzi, ale lubię je tak małe i tak proste, jak to tylko możliwe, więc może ktoś z nich skorzysta. Użyłbym javascript Number() i isNaN funkcjonalności w ten sposób:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Można również porównać wartość wejściową (która domyślnie jest traktowana jako ciąg znaków) do siebie wymuszonej jako liczba, np.:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Musisz jednak powiązać to z wydarzeniem takim jak keyup itp.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Użyj tego DOM:

<input type = "text" onkeydown = "validate(event)"/>

I ten skrypt:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...Lub ten skrypt, bez indexOf, za pomocą dwóch for ' s...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Użyłem atrybutu onkeydown zamiast onkeypress, ponieważ atrybut onkeydown jest sprawdzany przed atrybutem onkeypress. Problem byłby w przeglądarce Google Chrome.

Z atrybutem "onkeypress" TAB byłaby niekontrolowana z "preventDefault" w google chrome, jednak z atrybutem "onkeydown" TAB staje się / align = "left" /

Kod ASCII dla TAB = > 9

Pierwszy skrypt ma mniej kodu niż drugi, jednak tablica znaków ASCII musi mieć wszystkie klucze.

Drugi skrypt jest znacznie większy od pierwszego, ale tablica nie potrzebuje wszystkich kluczy. Pierwsza cyfra w każdej pozycji tablicy to ilość razy, ile każda pozycja zostanie odczytana. Dla każdego odczytu, zostanie zwiększona o 1 do następnego. Na przykład:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




W przypadku kluczy numerycznych jest ich tylko 10( 0-9), ale gdyby ich było 1 milion, nie miałoby sensu tworzenie tablicy z tymi wszystkimi kluczami.

Kody ASCII:

• 8 ==> (Backspace);
• 46 = > (Delete);
• 37 = > (strzałka w lewo);
• 39 = > (strzałka w prawo);
• 48 - 57 => (liczby);
• 36 = > (home);
• 35 = > (end);

Jest to ulepszona funkcja:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Najlepszym sposobem (niech wszystkie typy liczb-prawdziwe ujemne, prawdziwe dodatnie, iinteger ujemne, integer dodatnie) jest:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Jest to rozszerzona wersja rozwiązania geowa4 . Obsługuje atrybuty min i max. Jeśli liczba jest poza zakresem, zostanie wyświetlona poprzednia wartość.

Możesz go przetestować tutaj.

Użycie: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Jeśli dane wejściowe są dynamiczne, użyj tego:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});