Esiste un modo rapido per impostare un input di testo HTML ( <input type=text />) per consentire solo sequenze di tasti numerici (più '.')?

^{Nota: questa è una risposta aggiornata. I commenti di seguito si riferiscono a una versione precedente che si è comportata in modo scorretto con i codici chiave.}

JavaScript

Provalo tu stesso su JSFiddle .

Puoi filtrare i valori di input di un testo <input>con la seguente setInputFilterfunzione (supporta Copia + Incolla, Trascina + Rilascia, scorciatoie da tastiera, operazioni del menu contestuale, tasti non tipizzabili, posizione del punto di inserimento, layout di tastiera diversi e tutti i browser da 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 = "";
      }
    });
  });
}

Ora puoi usare la setInputFilterfunzione per installare un filtro di input:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Vedi la demo di JSFiddle per altri esempi di filtri di input. Si noti inoltre che è ancora necessario eseguire la convalida lato server!

Dattiloscritto

Ecco una versione di TypeScript di questo.

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

Esiste anche una versione jQuery di questo. Vedi questa risposta .

HTML 5

HTML 5 ha una soluzione nativa con <input type="number">(vedi le specifiche ), ma nota che il supporto del browser varia:

• La maggior parte dei browser convalida l'input solo quando si invia il modulo e non durante la digitazione.
• La maggior parte dei browser per dispositivi mobili non supportano i step, mine maxattributi.
• Chrome (versione 71.0.3578.98) consente comunque all'utente di inserire i caratteri ee Enel campo. Vedi anche questa domanda .
• Firefox (versione 64.0) e Edge (EdgeHTML versione 17.17134) consentono ancora all'utente di immettere qualsiasi testo nel campo.

Provalo tu stesso su w3schools.com .

Usa questo DOM

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

E questa sceneggiatura

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

Ho cercato a lungo e duramente una buona risposta a questo, e abbiamo un disperato bisogno <input type="number", ma a parte questo, questi 2 sono i modi più concisi che potrei trovare:

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

Se non ti piace il personaggio non accettato mostrato per una frazione di secondo prima di essere cancellato, il metodo di seguito è la mia soluzione. Nota le numerose condizioni aggiuntive, questo per evitare di disabilitare tutti i tipi di navigazione e tasti di scelta rapida. Se qualcuno sa come compattarlo, faccelo sapere!

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

Eccone uno semplice che consente esattamente un decimale, ma non di più:

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

E un altro esempio, che funziona alla grande per me:

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

Allega anche all'evento keypress

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

E HTML:

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

Ecco un esempio di jsFiddle

HTML5 ha <input type=number>, che suona bene per te. Attualmente, solo Opera lo supporta in modo nativo, ma esiste un progetto che ha un'implementazione JavaScript.

La maggior parte delle risposte qui hanno tutti la debolezza dell'uso di eventi chiave .

Molte delle risposte limiterebbero la tua capacità di fare la selezione del testo con macro della tastiera, copia + incolla e comportamenti più indesiderati, altri sembrano dipendere da specifici plugin jQuery, che sta uccidendo le mosche con le mitragliatrici.

Questa semplice soluzione sembra funzionare meglio per me multipiattaforma, indipendentemente dal meccanismo di input (sequenza di tasti, copia + incolla, copia + incolla con il tasto destro, sintesi vocale, ecc.). Tutte le macro della tastiera per la selezione del testo continuerebbero a funzionare e limiterebbero persino la possibilità di impostare un valore non numerico tramite script.

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

Ho scelto di utilizzare una combinazione delle due risposte menzionate qui, ad es

<input type="number" />

e

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 supporta regex, quindi puoi usare questo:

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

Avvertenza: alcuni browser non lo supportano ancora.

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

Inoltre potresti aggiungere virgola, punto e meno (, .-)

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

HTML

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

Così semplice....

// In una funzione JavaScript (può usare HTML o PHP).

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

Nel modulo di input:

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

Con ingresso max. (Questi sopra consentono un numero di 12 cifre)

2 soluzioni:

Utilizzare un validatore di moduli (ad esempio con il plugin di validazione jQuery )

Effettua un controllo durante l'evento onblur (ovvero quando l'utente lascia il campo) del campo di input, con l'espressione regolare:

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

Un approccio più sicuro consiste nel verificare il valore dell'input, invece di dirottare i tasti premuti e tentare di filtrare i codici chiave.

In questo modo l'utente è libero di utilizzare le frecce della tastiera, i tasti modificatori, il backspace, l'eliminazione, l'uso di tasti di scelta rapida non standard, il mouse per incollare, il trascinamento della selezione del testo e persino gli input di accessibilità.

Lo script seguente consente numeri positivi e negativi

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: ho rimosso la mia vecchia risposta perché penso che ora sia antiquata.

È possibile utilizzare il modello per questo:

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

Qui puoi vedere i suggerimenti completi sull'interfaccia del sito Web mobile .

Di seguito trovi la soluzione menzionata. In questo utente può essere in grado di entrare solo numericvalore, anche utente non può essere in grado di copy, paste, drage dropin ingresso.

Personaggi ammessi

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

Personaggi e personaggi non consentiti attraverso eventi

• Valore alfabetico
• Personaggi speciali
• copia
• Incolla
• Trascinare
• Far cadere

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

Fammi sapere se non funziona.

Se vuoi suggerire al dispositivo (forse un telefono cellulare) tra alfa o numerico puoi usare <input type="number">.

Un altro esempio in cui è possibile aggiungere solo numeri nel campo di input, non è possibile lettere

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

Un'implementazione breve e dolce che utilizza jQuery e replace () invece di guardare event.keyCode o event.which:

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

L'unico piccolo effetto collaterale che la lettera digitata appare momentaneamente e CTRL / CMD + A sembra comportarsi in modo un po 'strano.

input type="number" è un attributo HTML5.

Nell'altro caso questo ti aiuterà:

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

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

Codice HTML:

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

funziona perfettamente perché il codice tasto backspace è 8 e un'espressione regex non lo consente, quindi è un modo semplice per aggirare il bug :)

Un modo semplice per risolvere questo problema è l'implementazione di una funzione jQuery per convalidare con regex i caratteri digitati nella casella di testo, ad esempio:

Il tuo codice html:

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

E la funzione js utilizza 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"/>


		

Solo un'altra variante che utilizza jQuery

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

usa solo type = "number" ora questo attributo supporta nella maggior parte dei browser

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

Puoi anche confrontare il valore di input (che è trattato come stringa di default) con se stesso forzato come numerico, come:

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

Tuttavia, è necessario associarlo a eventi come keyup ecc.

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

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

Ho visto delle risposte fantastiche, tuttavia mi piacciono le più piccole e semplici possibile, quindi forse qualcuno ne trarrà beneficio. Vorrei usare JavaScript Number()e isNaNfunzionalità come questa:

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

Spero che sia di aiuto.

Usa questo DOM:

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

E questo script:

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

... O questo script, senza indexOf, usando due 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();}
    }
}

Ho usato l'attributo onkeydown invece di onkeypress, perché l'attributo onkeydown è controllato prima dell'attributo onkeypress. Il problema sarebbe nel browser Google Chrome.

Con l'attributo "onkeypress", TAB sarebbe incontrollabile con "preventDefault" su google chrome, tuttavia, con l'attributo "onkeydown", TAB diventa controllabile!

Codice ASCII per TAB => 9

Il primo script ha meno codice del secondo, tuttavia, l'array di caratteri ASCII deve avere tutte le chiavi.

Il secondo script è molto più grande del primo, ma l'array non ha bisogno di tutte le chiavi. La prima cifra in ciascuna posizione dell'array è il numero di volte in cui ogni posizione verrà letta. Per ogni lettura, verrà incrementato di 1 a quello successivo. Ad esempio:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Nel caso di chiavi numeriche sono solo 10 (0 - 9), ma se fossero 1 milione non avrebbe senso creare un array con tutte queste chiavi.

Codici ASCII:

• 8 ==> (Backspace);
• 46 => (Elimina);
• 37 => (freccia sinistra);
• 39 => (freccia destra);
• 48 - 57 => (numeri);
• 36 => (casa);
• 35 => (fine);

Questa è una funzione migliorata:

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

Il modo migliore (consenti TUTTI i tipi di numeri - reale negativo, reale positivo, iinteger negativo, intero positivo) è:

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

Questa è la versione estesa della soluzione di geowa4 . Supporti mine maxattributi. Se il numero non rientra nell'intervallo, verrà visualizzato il valore precedente.

Puoi provarlo qui.

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

            }       
    });     
});

Se gli ingressi sono dinamici, utilizzare questo:

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