Qual è il modo migliore per limitare l'input "numerico" solo per le caselle di testo?

Sto cercando qualcosa che consenta punti decimali.

Vedo molti esempi. Ma devi ancora decidere quale usare.

Aggiornamento da Praveen Jeganathan

Niente più plugin, jQuery ha implementato il proprio jQuery.isNumeric()aggiunto in v1.7. Vedi: https://stackoverflow.com/a/20186188/66767

Aggiornare

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 tipizzabili e tutti i layout di tastiera.

Vedi questa risposta o provala tu stesso su JSFiddle .

plugin jquery.numeric

Ho implementato con successo molti moduli con il plugin jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

Inoltre funziona anche con textareas!

Tuttavia, tieni presente che Ctrl + A, Copia + Incolla (tramite il menu contestuale) e Trascina + Rilascia non funzioneranno come previsto.

HTML 5

Con un supporto più ampio per lo standard HTML 5, possiamo usare l' patternattributo e il numbertipo per gli inputelementi per limitare l'input solo numerico. In alcuni browser (in particolare Google Chrome), funziona anche per limitare l'incollamento di contenuti non numerici. Maggiori informazioni su numbere altri tipi di input più recenti sono disponibili qui .

Se si desidera limitare l'input (anziché la convalida), è possibile lavorare con gli eventi chiave. qualcosa come questo:

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

E:

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

Questo fa immediatamente sapere all'utente che non possono inserire caratteri alfa, ecc. Piuttosto che successivamente durante la fase di validazione.

Avrai comunque bisogno di convalidare perché l'input potrebbe essere compilato tagliando e incollando con il mouse o eventualmente da un modulo autocompleter che potrebbe non attivare gli eventi chiave.

Ho pensato che la migliore risposta fosse quella sopra per fare proprio questo.

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

ma concordo sul fatto che è un po 'doloroso che i tasti freccia e il pulsante Elimina facciano scattare il cursore alla fine della stringa (e per questo motivo è stato restituito a me durante i test)

Ho aggiunto una semplice modifica

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

in questo modo se viene premuto un pulsante che non causerà la modifica del testo, ignoralo. Con questo puoi colpire le frecce ed eliminare senza saltare fino alla fine ma cancella qualsiasi testo non numerico.

Il plugin jquery.numeric ha alcuni bug di cui ho informato l'autore. Consente più punti decimali in Safari e Opera e non è possibile digitare backspace, tasti freccia o diversi altri caratteri di controllo in Opera. Avevo bisogno di un input intero positivo e alla fine ho finito per scrivere il mio.

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

Niente più plugin, jQuery ha implementato il proprio jQuery.isNumeric () aggiunto nella v1.7.

jQuery.isNumeric( value )

Determina se il suo argomento è un numero.

Risultati dei campioni

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

Ecco un esempio di come legare isNumeric () con il listener di eventi

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

Il plug-in numerico () menzionato sopra, non funziona in Opera (non è possibile eseguire il backspace, eliminare o persino utilizzare i tasti indietro o avanti).

Il codice seguente in JQuery o Javascript funzionerà perfettamente (ed è solo due righe).

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]/));
}

Naturalmente questo è solo per input numerici puri (più backspace, cancella, tasti avanti / indietro) ma può essere facilmente modificato per includere punti e meno caratteri.

È possibile utilizzare il plug-in di convalida con il suo metodo number () .

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

Non è necessario il codice lungo per la limitazione dell'input numerico, prova questo codice.

Accetta anche int e float validi entrambi i valori.

Approccio Javascript

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

Approccio jQuery

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

AGGIORNARE

Le risposte di cui sopra sono per il caso d'uso più comune: convalida dell'input come numero.

Ma di seguito è riportato lo snippet di codice per casi d'uso speciali

• Consentire numeri negativi
• Mostra la sequenza di tasti non valida prima di rimuoverla.

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

Di seguito è quello che uso per bloccare letteralmente i tasti. Ciò consente solo numeri 0-9 e un punto decimale. Facile da implementare, non molto codice e funziona come un incantesimo:

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

Come lieve miglioramento di questo suggerimento , è possibile utilizzare il plug-in di convalida con i suoi metodi numero () , cifre e intervallo . Ad esempio, quanto segue garantisce di ottenere un numero intero positivo compreso tra 0 e 50:

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

Non vedi alfabeti aspetto magico e scomparsa sulla chiave in basso. Funziona anche con il mouse paste.

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

Ho provato a risolverlo per la prima volta usando jQuery, ma non ero contento che i caratteri indesiderati (non cifre) apparissero nel campo di input prima di essere rimossi al keyup.

Alla ricerca di altre soluzioni ho trovato questo:

Numeri interi (non negativi)

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

Fonte: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Esempio live: http://jsfiddle.net/u8sZq/

Punti decimali (non negativi)

Per consentire un singolo punto decimale potresti fare qualcosa del genere:

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

Fonte: ho appena scritto questo. Sembra funzionare. Esempio live: http://jsfiddle.net/tjBsF/

Altre personalizzazioni

• Per consentire la digitazione di più simboli, basta aggiungerli all'espressione regolare che funge da filtro di base del codice char.
• Per implementare semplici restrizioni contestuali, guarda il contenuto corrente (stato) del campo di input (oToCheckField.value)

Alcune cose che potresti essere interessato a fare:

• È consentito solo un punto decimale
• Consenti il ​​segno meno solo se posizionato all'inizio della stringa. Ciò consentirebbe numeri negativi.

carenze

• La posizione del cursore non è disponibile all'interno della funzione. Ciò ha notevolmente ridotto le restrizioni contestuali che è possibile implementare (ad esempio, non esistono due simboli consecutivi uguali). Non sono sicuro di quale sia il modo migliore per accedervi.

So che il titolo richiede soluzioni jQuery, ma spero che qualcuno lo troverà comunque utile.

Grazie per il post Dave Aaron Smith

Ho modificato la tua risposta per accettare il punto decimale e i numeri dalla sezione dei numeri. Questo lavoro è perfetto per me.

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

E applicalo su tutti gli input che desideri:

$('selector').ForceNumericOnly();

HTML5 supporta il numero del tipo di input con supporto browser globale 88% + secondo CanIUse a partire da ottobre 2015.

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

Questa non è una soluzione correlata a JQuery, ma il vantaggio è che sui telefoni cellulari la tastiera Android sarà ottimizzata per l'immissione dei numeri.

In alternativa, è possibile utilizzare il testo del tipo di input con il nuovo parametro "modello". Maggiori dettagli nelle specifiche HTML5.

Penso che sia meglio della soluzione jquery, poiché in questa domanda a condizione che la soluzione jquery non supporti migliaia di separatori. Se puoi usare html5.

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

Questa funzione fa la stessa cosa, usa alcune delle idee sopra.

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

• mostra feedback visivo (prima che scompaia appare una lettera errata)
• consente decimali
• cattura più "."
• non ha problemi con il tasto sinistra / destra ecc.

/ * questa è la mia versione cross-browser di Come consentire solo numeri (0-9) nella casella di input HTML usando 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();
            }
        }

  });

Basta eseguire il contenuto tramite parseFloat (). Restituirà un NaNinput non valido.

Puoi usare autoNumeric da decorplanit.com . Hanno un buon supporto per numerico, oltre a valuta, arrotondamenti, ecc.

Ho usato in un ambiente IE6, con poche modifiche ai CSS, ed è stato un successo ragionevole.

Ad esempio, è numericInputpossibile definire una classe CSS e può essere utilizzata per decorare i campi con le maschere di input numeriche.

adattato dal sito web autoNumeric:

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

Penso che questo sia un buon modo per risolvere questo problema ed è estremamente semplice:

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

Esempio: JSFiddle

Scenari coperti

I consigli più simili qui falliscono almeno uno di questi o richiedono molto codice per coprire tutti questi scenari.

1. Consente solo 1 punto decimale.
2. Consente home, ende le arrowchiavi.
3. Consente deletee backspaceda utilizzare in qualsiasi indice.
4. Consente la modifica in qualsiasi indice (purché l'input corrisponda alla regex).
5. Permette ctrl + v e shift + insert per input valido (lo stesso con il tasto destro + incolla).
6. Non lampeggia il valore del testo perché l' keyupevento non viene utilizzato.
7. Ripristina la selezione dopo un input non valido.

Scenari falliti

• A partire da 0.5e cancellando solo lo zero non funzionerà. Questo può essere risolto modificando la regex in /^[0-9]*\.?[0-9]*$/e quindi aggiungendo un evento di sfocatura per anteporre a 0quando la casella di testo inizia con un punto decimale (se lo si desidera). Vedi questo scenario avanzato per una migliore idea di come risolvere questo problema.

Collegare

Ho creato questo semplice plugin jquery per renderlo più semplice:

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

Il modo migliore è di controllare i contenuti della casella di testo ogni volta che perde la messa a fuoco.

Puoi verificare se il contenuto è un "numero" usando un'espressione regolare.

Oppure puoi utilizzare il plug-in di convalida, che sostanzialmente lo fa automaticamente.

Controllare questo codice di ricerca per l'uso del database:

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

Questo è uno snippet che ho appena fatto (usando una parte del codice di Peter Mortensen / Keith Bentrup) per una convalida percentuale intera su un campo di testo (è richiesto jQuery):

/* 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;
    }
});

Questo codice:

• Consente di utilizzare i principali tasti numerici e il tastierino numerico.
• Convalida per escludere i caratteri Maiusc-numerici (ad es. #, $,%, Ecc.)
• Sostituisce i valori NaN con 0
• Sostituisce con 100 valori superiori a 100

Spero che questo aiuti chi è nel bisogno.

Ho trovato un'ottima soluzione qui http://ajax911.com/numbers-numeric-field-jquery/

Ho appena cambiato il "keyup" in "keydown" secondo il mio requisito

Se stai utilizzando HTML5 non devi fare di tutto per eseguire la convalida. Usa solo -

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

L'attributo step consente al punto decimale di essere valido.

Altro modo per mantenere la posizione del cursore sull'ingresso:

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

vantaggi:

1. L'utente può utilizzare i tasti freccia, Backspace, Elimina, ...
2. Funziona quando vuoi incollare i numeri

Plunker: Demo funzionante

Ho appena trovato un plug-in ancora migliore. Ti dà molto più controllo. Supponi di avere un campo DOB in cui è necessario che sia numerico ma accetta anche caratteri "/" o "-".

Funziona benissimo!

Dai un'occhiata a 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();
  }
});

Questo codice ha funzionato abbastanza bene con me, ho dovuto solo aggiungere il 46 nell'array controlKeys per usare il punto, anche se non credo sia il modo migliore per farlo;)

L'ho usato, con buoni risultati ..

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

Questo è molto semplice che abbiamo già una funzione integrata javascript "isNaN" è lì.

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