Czy istnieje szybki sposób na ustawienie wprowadzania tekstu HTML ( <input type=text />) tak, aby zezwalał tylko na naciśnięcia klawiszy numerycznych (plus „.”)?

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

JavaScript

Wypróbuj sam na JSFiddle .

Możesz filtrować wartości wejściowe tekstu <input>za pomocą następującej setInputFilterfunkcji (obsługuje kopiowanie + wklejanie, przeciąganie + upuszczanie, skróty klawiaturowe, operacje w menu kontekstowym, klawisze niewypełniane, położenie karetki, różne układy klawiatury i wszystkie przeglądarki od wersji IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

Możesz teraz użyć tej setInputFilterfunkcji, aby zainstalować filtr wejściowy:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' 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!

Maszynopis

Oto jego wersja TypeScript.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Istnieje również wersja jQuery. 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 .

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 pytanie i rozpaczliwie potrzebujemy <input type="number", ale poza tym 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ę postać nieakceptowana wyświetlana przez ułamek sekundy przed usunięciem, poniższa metoda jest moim rozwiązaniem. Zwróć uwagę na liczne dodatkowe warunki, aby uniknąć wyłączenia wszelkiego rodzaju nawigacji i skrótów klawiszowych. Jeśli ktoś wie, jak to uproś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) )">

Oto prosty, który pozwala na dokładnie jedną dziesiętną, ale nie więcej:

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

I jeszcze jeden przykład, który działa dla mnie świetnie:

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 także do zdarzenia naciśnięcia klawisza

$(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 ma <input type=number>, co brzmi dla Ciebie. Obecnie tylko Opera obsługuje go natywnie, ale istnieje projekt z implementacją JavaScript.

Większość odpowiedzi tutaj ma słabość korzystania z kluczowych zdarzeń .

Wiele odpowiedzi ograniczyłoby twoją zdolność do wybierania tekstu za pomocą makr klawiatury, kopiowania i wklejania i bardziej niechcianych zachowań, inne wydają się zależeć od konkretnych wtyczek jQuery, które zabijają muchy za pomocą karabinów maszynowych.

To proste rozwiązanie wydaje mi się najlepsze dla wielu platform, niezależnie od mechanizmu wprowadzania (naciśnięcie klawisza, kopiowanie + wklejanie, kopiowanie + wklejanie w prawo, wklejanie, zamiana tekstu na mowę itp.). Wszystkie makra klawiatury wyboru tekstu nadal działałyby, a nawet ograniczałyby możliwość ustawiania wartości nieliczbowych za pomocą skryptu.

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

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

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

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

dodatkowo możesz 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);"/ >

Tak prosty....

// 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 maks. (Powyższe pozwala na 12-cyfrowy numer)

2 rozwiązania:

Użyj walidatora formularza (na przykład z wtyczką sprawdzania poprawności jQuery )

Wykonaj sprawdzenie podczas zdarzenia onblur (tj. Kiedy użytkownik opuści pole) zdarzenia pola wejściowego, używając 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);"/>

Bezpieczniejszym podejściem jest sprawdzanie wartości danych wejściowych zamiast przejmowania naciśnięć klawiszy i próby filtrowania kodów klawiszy.

W ten sposób użytkownik może swobodnie korzystać ze strzałek, klawiszy modyfikujących, cofania, usuwania, używania niestandardowych klawiszy, używania myszy do wklejania, przeciągania i upuszczania tekstu, a nawet wprowadzania danych dotyczących dostępności.

Poniższy skrypt dopuszcza liczby dodatnie i ujemne

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>

EDYCJA: Usunąłem moją starą odpowiedź, ponieważ myślę, że jest już przestarzała.

Możesz użyć wzoru do tego:

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

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

Poniżej znajduje się wymienione rozwiązanie. W tym użytkownik może być w stanie wprowadzić tylko numericwartość, użytkownik nie może również być w stanie copy, paste, dragi dropna wejściu.

Dozwolone postacie

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

Niedozwolone Postacie i Postacie poprzez zdarzenia

• Wartość alfabetyczna
• Znaki specjalne
• Kopiuj
• Pasta
• Opór
• Upuszczać

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

Daj mi znać, jeśli to nie zadziała.

Jeśli chcesz zasugerować urządzeniu (np. Telefonowi komórkowemu) wartość alfanumeryczną lub cyfrową, możesz użyć <input type="number">.

Jeszcze jeden przykład, w którym można dodać tylko liczby w polu wprowadzania, nie można liter

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

Krótka i słodka implementacja wykorzystująca jQuery i replace () zamiast patrzeć na event.keyCode lub event.which:

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

Tylko niewielki efekt uboczny polega na tym, że wpisana litera pojawia się na chwilę, a CTRL / CMD + A wydaje się zachowywać nieco dziwnie.

input type="number" jest atrybutem HTML5.

W innym przypadku pomoże ci to:

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 cofania to 8, a wyrażenie regularne nie pozwala na to, więc jest to łatwy sposób na obejście błędu :)

Łatwym sposobem rozwiązania tego problemu jest zaimplementowanie funkcji jQuery do sprawdzania poprawności znaków regularnych wpisywanych 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"/>


		

Tylko inny wariant z użyciem jQuery

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

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

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

Możesz także porównać wartość wejściową (która jest domyślnie traktowana jako ciąg) z samą siłą wymuszoną jako wartość liczbową, na przykład:

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

Musisz jednak powiązać to ze zdarzeniem, 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>

Widziałem kilka świetnych odpowiedzi, jednak lubię je tak małe i tak proste, jak to możliwe, więc może ktoś z nich skorzysta. Chciałbym użyć javascript Number()i isNaNfunkcjonalności takich jak to:

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

Mam nadzieję że to pomoże.

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, używając dwóch for...

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 dotyczyłby przeglądarki Google Chrome.

Z atrybutem „onkeypress” TAB byłby niekontrolowany za pomocą „preventDefault” w Google Chrome, jednak z atrybutem „onkeydown”, TAB można kontrolować!

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 niż pierwszy, ale tablica nie potrzebuje wszystkich kluczy. Pierwsza cyfra w każdej pozycji tablicy oznacza liczbę odczytów każdej pozycji. Dla każdego odczytu będzie zwiększany 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 tylko 10 (0 - 9), ale gdyby były 1 milion, nie ma sensu tworzyć tablicy z tymi wszystkimi kluczami.

Kody ASCII:

• 8 ==> (Backspace);
• 46 => (Usuń);
• 37 => (strzałka w lewo);
• 39 => (prawa strzałka);
• 48 - 57 => (liczby);
• 36 => (dom);
• 35 => (koniec);

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

Najlepszy sposób (zezwalaj na WSZYSTKIE liczby - prawdziwy ujemny, prawdziwy dodatni, iinteger ujemny, całkowity dodatni) to:

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

To jest rozszerzona wersja rozwiązania geowa4 . Obsługuje mini maxatrybuty. Jeśli liczba jest poza zakresem, zostanie wyświetlona poprzednia wartość.

Możesz to przetestować tutaj.

Stosowanie: <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'));
            }
    }); 
});