Come fare in modo che il tag di input HTML accetti solo valori numerici?

143

Devo assicurarmi che un determinato <input>campo prenda solo i numeri come valore. L'input non fa parte di un modulo. Quindi non viene inviato, quindi la convalida durante l'invio non è un'opzione. Voglio che l'utente non sia in grado di digitare caratteri diversi dai numeri.

C'è un modo pulito per raggiungere questo obiettivo?

html  input  numbers  validating 
— Chiel dieci Brinke
fonte
— alexblum
2
Dai un'occhiata a questo [link] [1], che ha abbastanza informazioni. [1]: stackoverflow.com/questions/469357/...
— Maheshkumar
Questo può anche rivelarsi utile: stackoverflow.com/questions/995183/...
— Chiel ten Brinke
— emkey08

Risposte:

282

HTML 5

È possibile utilizzare il numero del tipo di input HTML5 per limitare solo le voci numeriche:

<input type="number" name="someid" />

Funzionerà solo nel browser dei reclami HTML5. Assicurati che il tipo di documento del tuo documento HTML sia:

<!DOCTYPE html>

Vedi anche https://github.com/jonstipe/number-polyfill per supporto trasparente nei browser meno recenti.

JavaScript

Aggiornamento: esiste una soluzione nuova e molto semplice per questo:

Ti consente di utilizzare qualsiasi tipo di filtro di input su un testo <input>, inclusi vari filtri numerici. Questo gestirà correttamente Copia + Incolla, Trascina + Rilascia, scorciatoie da tastiera, operazioni del menu contestuale, tasti non digitabili e tutti i layout di tastiera.

Vedi questa risposta o provala tu stesso su JSFiddle .

Per scopi generali, puoi avere la convalida JS come di seguito:

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

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

Se si desidera consentire i decimali, sostituire la "condizione if" con questa:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Fonte: l' immissione di testo HTML consente solo l'immissione numerica

Demo JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

— Viral Patel
fonte
6
Sì, questo funziona per me sia in Firefox che in Chrome. Strano che js sia necessario per una cosa così semplice.
— Chiel ten Brinke,
7
Non funziona in Chrome 30. Non ho problemi a digitare lettere nel tuo input "numerico" nel violino. Hmmm ...
— Ben
2
E se qualcuno volesse inserire valori float come 8.9?
— syed shah,
6
per una soluzione più solida, considera anche che copia e incolla può aggiungere lettere a questo esempio!
— Neil,
3
Oops !! la prima riga deve essere modificata in:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

Puoi anche usare l'attributo pattern in html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Immetti tutorial di convalida

Anche se, se il tuo doctype non htmllo è, penso che dovrai usare javascript / jquery.

— martincarlin87
fonte
3
Sebbene firefox dia alla casella di input un bordo rosso quando vengono digitati non numeri, sia in firefox che in chrome, è possibile digitare caratteri non numerici nella casella di input.
— Chiel ten Brinke,
che tipo di documento stai usando sulla tua pagina?
— martincarlin87,
ok, forse non è supportato nelle versioni del tuo browser? Non sono sicuro al 100%, ma ad essere sincero userei alcuni js per validare, al momento non farei affidamento esclusivamente su html5
— martincarlin87,
7
la proprietà ti consente di inserire numeri ma non di inviare il modulo.
— My1
1
INVIA SOLO CONVALIDA!
— Eric Hodonsky,
16

Codice semplice e veloce

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Ciò consentirà l'utilizzo solo di numeri e backspace.

Se è necessaria anche la parte decimale, utilizzare questo frammento di codice

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
— abhijithvijayan
fonte
13

Prova questo codice insieme al campo di input stesso

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

funzionerà benissimo.

— subindas pm
fonte
come eliminare backspace quindi?
— 6by3,
7

Puoi usare un <input type="number" /> . Ciò consentirà di inserire solo numeri nella casella di input.

Esempio: http://jsfiddle.net/SPqY3/

Si noti che il type="number"tag di input è supportato solo nei browser più recenti.

Per Firefox, puoi validare l'input usando javascript:

http://jsfiddle.net/VmtF5/

Aggiornamento 12-03-2018: il supporto del browser è molto meglio ora è supportato da quanto segue:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Bordo
  • (Internet Explorer 10+)
— starbeamrainbowlabs
fonte
1
Sembra funzionare molto bene in Chrome, ma non in Firefox.
— Chiel ten Brinke,
Ah. Questo perché firefox non supporta input type = number. In alternativa, è possibile utilizzare alcuni javascript per convalidare l'input mentre l'utente immette il testo. Risposta aggiornata
— Starbeamrainbowlabs
Anche il jscript su jsfiddle.net/VmtF5 non funzionerà. Anche se 1 cifra è all'inizio del carattere, la validazione fallisce. Provalo tu stesso su jsfiddle
— Akshay
@aarn Funziona per me (vedi i.imgur.com/AWdmEov.png ), quale browser stai usando?
— starbeamrainbowlabs
@starbeamrainbowlabs Sto usando Firefox. Inoltre, inserisci 6abc, non ti mostrerà l'errore
— Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

e nel js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

oppure puoi scriverlo in un modo complicato ma utile:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Nota : cross-browser e regex in letterale.

— Fredrick Gauss
fonte
come aggiungeresti la possibilità di inserire input come .5 o .3?
— user3591637
Quindi devi considerare il primo e il secondo carattere ( 0.43o .43) che potrebbero essere fatti controllando il valore dell'input corrente più il tasto premuto. Sarebbe brutto nel codice di una riga, ti consiglio di usare una funzione per questo. Per testare numeri interi o float, controlla qui .
— Fredrick Gauss,
1
non puoi cancellare un numero inserito per errore
— Chris Sim
5

Ho usato l'espressione regolare per sostituire il valore di input con il modello necessario.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Espandi frammento

— Shaktish
fonte
1
Ecco perché amo regex. Grazie amico, mi hai davvero salvato la giornata
— Nirmal,
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup si innesca quando si rilascia la chiave.

isNaN(parseFloat(value))? controlla se il valore di input non è un numero.

Se non è un numero, il valore è impostato su 1000. :Se è un numero, il valore è impostato sul valore.

nota: per qualche motivo funziona solo contype="number"

Per renderlo ancora più eccitante, puoi anche avere un limite:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

Godere!

— user40521
fonte
4

Ho combattuto con questo per un po '. Molte soluzioni qui e altrove sembravano complicate. Questa soluzione utilizza jQuery / javascript insieme a HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

Nel mio caso stavo monitorando piccole quantità con un valore minimo di 1, quindi min = "1" nel tag di input e abc = 1 nel controllo isNaN (). Per i numeri solo positivi è possibile modificare tali valori su 0 e anche semplicemente rimuovere min = "1" dal tag di input per consentire numeri negativi.

Funziona anche con più caselle (e potrebbe farti risparmiare un po 'di tempo in più rispetto a eseguirle singolarmente per ID), basta aggiungere la classe "validateNumber" dove necessario.

Spiegazione

parseInt () fondamentalmente fa quello che ti serve, tranne per il fatto che restituisce NaN piuttosto che un valore intero. Con un semplice if () puoi impostare il valore "fallback" che preferisci in tutti i casi in cui viene restituito NaN :-). Anche W3 afferma qui che la versione globale di NaN digiterà il cast prima di verificare, il che fornisce alcune prove extra (Number.isNaN () non lo fa). Tutti i valori inviati a un server / back-end devono comunque essere convalidati lì!

— Isaia
fonte
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Espandi frammento

JSFiddle: https://jsfiddle.net/ug8pvysc/

— Sameh Saeed
fonte
1
Quando incolli un valore contenente testo, lo consente
— Chris Sim,
1
Permette anche caratteri speciali. Ad esempio: á, ã, ê, ó, è, ecc.
— AlmostPitt
3

se puoi usare HTML5 puoi farlo <input type="number" /> Altrimenti dovrai farlo tramite javascript come hai detto che non viene inviato per farlo da codebehind.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS non ha testato il codice ma dovrebbe essere più o meno corretto se non controlla errori di battitura: D Potresti voler aggiungere alcune altre cose come cosa fare se la stringa è nulla o vuota ecc. Inoltre potresti renderlo più veloce: D

— czioutas
fonte
2

se non intero impostare 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— websky
fonte
2

La risposta accettata:

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

È buono ma non perfetto. Per me funziona, ma ricevo un avvertimento che l'istruzione if può essere semplificata.

Quindi sembra così, che è molto più bello:

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

Commenterei il post originale, ma la mia reputazione è troppo bassa per farlo (ho appena creato questo account).

— Chris H.
fonte
2

Puoi usare il <input> tag con l'attributo type = 'number'.

Ad esempio puoi usare <input type='number' />

Questo campo di input consente solo valori numerici. È inoltre possibile specificare il valore minimo e il valore massimo che devono essere accettati da questo campo.

— Geeth Chadalawada
fonte
2

Si prega di vedere il mio progetto del filtro cross-browser del valore dell'elemento di input di testo sulla tua pagina Web utilizzando il linguaggio JavaScript: Filtro chiave di input . È possibile filtrare il valore come un numero intero, un numero float o scrivere un filtro personalizzato, ad esempio un filtro del numero di telefono. Vedi un esempio di codice di input un numero intero:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Espandi frammento

Vedi anche la mia pagina "Campo intero:" dell'esempio del filtro chiave di input

— Andrej
fonte
2

Per scopi generali, puoi avere la convalida JS come di seguito:

Funzionerà con il tastierino numerico e i normali tasti numerici 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
— YasirPoongadan
fonte
2

Aggiungi all'interno del tag di input: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
fonte
2
Benvenuti in SO! Sfortunatamente, questa è una domanda di 5 anni e mezzo che ha già una risposta accettata. Si potrebbe desiderare di navigare domande senza risposta qui: stackoverflow.com/unanswered
— AndroidNoobie
2

Ho aggiornato alcune risposte pubblicate per aggiungere quanto segue:

  • Aggiungi il metodo come metodo di estensione
  • Consentire l'inserimento di un solo punto

  • Specificare quanti numeri dopo il punto decimale sono consentiti.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
— Plexis Plexis
fonte
1

Lo uso per i codici postali, semplice e veloce.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— Justin Buser
fonte
1

Quando si utilizza questo codice non è possibile utilizzare "Pulsante BackSpace" in Mozilla Firefox, è possibile utilizzare solo backspace in Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "richiesto>

— Wendell Alvarez
fonte
0

È meglio aggiungere "+" alla condizione REGEX per accettare più cifre (non solo una cifra):

<input type="text" name="your_field" pattern="[0-9]+">

— Dashko Leonid
fonte
0

Un modo potrebbe essere quello di avere una serie di codici di caratteri consentiti e quindi utilizzare il Array.includes funzione per vedere se il carattere inserito è consentito.

Esempio:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
fonte
0

Abbastanza semplice?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Espandi frammento

— Norma Jean
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.