jQuery: qual è il modo migliore per limitare il “numero”, solo l’input per le caselle di testo? (consentire i punti decimali)

Qual è il modo migliore per limitare il “numero”, solo l’input per le caselle di testo?

Sto cercando qualcosa che consente i punti decimali.

Vedo molti esempi Ma devono ancora decidere quale usare.

Aggiornamento di Praveen Jeganathan

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

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

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

Inoltre funziona anche con i textareas!

EDIT: – Con un supporto più ampio per gli standard HTML più recenti, possiamo usare l’attributo pattern e il tipo di number per gli elementi di input per limitare il numero di input. Funziona anche per limitare l’incollaggio di contenuto non numerico. Ulteriori informazioni sul number e altri tipi di input più recenti sono disponibili qui .

Se si desidera limitare l’input (al contrario della convalida), è ansible lavorare con gli eventi chiave. qualcosa come questo:

  

E:

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

Questo consente immediatamente all’utente di sapere che non è ansible immettere caratteri alfa, ecc. Piuttosto che in seguito durante la fase di convalida.

Continuerete a convalidare perché l’input potrebbe essere completato tagliando e incollando con il mouse o eventualmente da un form autocompleter che potrebbe non triggersre gli eventi chiave.

Ho pensato che la migliore risposta fosse quella sopra per farlo.

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

ma sono d’accordo sul fatto che è un po ‘un dolore che i tasti freccia e il pulsante di cancellazione facciano scattare il cursore alla fine della stringa (e per questo mi è stato restituito in fase di test)

Ho aggiunto in un semplice cambiamento

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

in questo modo se c’è un qualsiasi tasto che non causerà la modifica del testo, ignoralo. Con questo è ansible colpire frecce e cancellare senza saltare fino alla fine, ma cancella qualsiasi testo non numerico.

Il plugin jquery.numeric ha alcuni bug che ho notificato all’autore di. Consente più punti decimali in Safari e Opera, e non è ansible digitare backspace, tasti freccia o molti altri caratteri di controllo in Opera. Avevo bisogno di un input intero positivo, quindi 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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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(); } }); 

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

jQuery.isNumeric( value )

Determina se il suo argomento è addizionale.

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 bind 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 plugin numerico () sopra menzionato, non funziona in Opera (non puoi backspace, cancellare o usare le chiavi back o forward).

Il codice qui sotto 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]/)); } 

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

Puoi usare il plugin Validation con il suo metodo number () .

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

Non è necessario il codice lungo per la limitazione dell’input del numero, basta provare 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(); } } 
 

Input box that accepts only valid int and float values.

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

   

Come un lieve miglioramento di questo suggerimento , è ansible utilizzare il plug-in Validation con i suoi metodi number () , cifre e range . Ad esempio, quanto segue ti assicura 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 l’aspetto magico degli alfabeti e la scomparsa sulla chiave giù. Funziona anche con il mouse.

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

Ho provato per la prima volta a risolvere questo problema usando jQuery, ma non ero contento che i caratteri indesiderati (non cifre) fossero effettivamente visualizzati nel campo di input prima di essere rimossi sulla chiave.

Alla ricerca di altre soluzioni ho trovato questo:

Numeri interi (non negativi)

  

Enter numbers only:

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 si potrebbe fare qualcosa di simile:

  

Fonte: ho appena scritto questo Sembra funzionare. Esempio dal vivo: 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 (stato) corrente del campo di input (oToCheckField.value)

Alcune cose che potresti essere interessato a fare:

  • È consentito solo un punto decimale
  • Consenti 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 ridotto notevolmente le restrizioni contestuali che è ansible implementare (ad es. Non ci sono due simboli consecutivi uguali). Non sei sicuro di quale sia il modo migliore per accedervi.

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

Grazie per il post Dave Aaron Smith

Ho modificato la tua risposta per accettare il punto decimale e il numero 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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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 di tipo di input con supporto browser globale 88% + secondo CanIUse a partire da ottobre 2015.

  

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, è ansible utilizzare il testo del tipo di input con il nuovo parametro “pattern”. Maggiori dettagli nelle specifiche HTML5.

Penso che sia meglio della soluzione jquery, dal momento che in questa domanda la soluzione jquery non supporta il separatore di migliaia. 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 (appare una lettera errata prima di scomparire)
  • consente decimali
  • cattura più “.”
  • non ha problemi con left / right del etc.

/ * questa è la mia versione cross-browser di Come consentire solo numeri numerici (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(); } } }); 

È ansible utilizzare autoNumeric da decorplanit.com . Hanno un buon supporto per numerico, così come valuta, arrotondamento, ecc.

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

Ad esempio, è ansible definire una class css numericInput e potrebbe essere utilizzata per decorare i campi con le maschere di immissione numerica.

adattato dal sito Web di 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

La maggior parte delle raccomandazioni simili qui falliscono almeno una di queste o richiedono un sacco di codice per coprire tutti questi scenari.

  1. Permette solo 1 punto decimale.
  2. Consente a home , alla end e ai tasti arrow .
  3. Consente l’ delete e il backspace da utilizzare in qualsiasi indice.
  4. Consente la modifica di qualsiasi indice (purché l’input corrisponda alla regex).
  5. Consente ctrl + ve shift + insert per l’input valido (lo stesso con il clic destro + incolla).
  6. Non sfarfalla il valore del testo perché l’evento keyup non viene utilizzato.
  7. Ripristina la selezione dopo l’input non valido.

Scenari falliti

  • A partire da 0.5 e l’eliminazione dello zero non funzionerà. Questo può essere risolto cambiando la regex in /^[0-9]*\.?[0-9]*$/ e quindi aggiungendo un evento di sfocatura per anteporre uno 0 quando 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.

Colbind

Ho creato questo semplice plugin jquery per semplificare questo processo:

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

Il modo migliore è controllare i contetti della casella di testo ogni volta che perde il focus.

È ansible verificare se il contenuto è un “numero” utilizzando un’espressione regolare.

Oppure puoi usare il plugin Validation, che fondamentalmente lo fa automaticamente.

Controlla questo codice di ricerca per l’utilizzo 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)' 

Basta eseguire il contenuto tramite parseFloat (). Restituirà NaN su input non validi.

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

 /* 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 tasti numerici principali e il tastierino numerico.
  • Convalida l’esclusione di caratteri numerici Shift (es. #, $,%, Ecc.)
  • Sostituisce i valori NaN di 0
  • Sostituisce di 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 la “chiave” in “keydown” come da mio requisito

Se stai usando HTML5 non hai bisogno di andare a grandi lunghezze per eseguire la convalida. Basta usare –

  

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

Altro modo per mantenere la posizione del cursore sull’input:

 $(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 si desidera incollare i numeri

Plunker: Demo funzionante

Ho appena trovato un plug-in ancora migliore. Ti dà molto più controllo. Supponiamo che tu abbia un campo DOB dove ti serve essere numerico ma accetta anche i caratteri “/” o “-“.

Funziona alla grande!

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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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 su di me, ho solo dovuto aggiungere il 46 nell'array controlKeys per utilizzare il periodo, anche se non penso che 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; } });