Permettere solo numeri maggiori di zero in un campo di testo

**Roby140569** · 16-04-2019, 12:44

In un campo di testo di un form dove verranno inseriti km percorsi da un veicolo, vorrei consentire la digitazione solo di numeri maggiori di zero.

Con questa funzione riesco a far sì che vengano inseriti solo numeri non negativi, ma viene permesso lo zero.

codice:

function PermettiSoloNumeri(e) {
        var code = (e.which) ? e.which : e.keyCode;
        if (code > 31 && (code < 48 || code > 57)) {
            e.preventDefault();
        }
    }

Per evitare che sia possibile incollare nel campo qualunque cosa, ho impedito copy/cut/paste.

codice:

<input type="text" name="km" class="form-control" id="km" oncopy="return false;" onpaste="return false;" oncut="return false;" onkeypress="PermettiSoloNumeri(event)" placeholder="Digita i chilometri" required>

L'ideale sarebbe modificare la funzione in modo da impedire l'inserimento dello zero e, se possibile, impedire il "paste", senza pasticciare il codice HTML.

Qualche idea?
Grazie!

**KillerWorm** · 16-04-2019, 15:33

Per evitare che sia possibile incollare nel campo qualunque cosa, ho impedito copy/cut/paste.

quanto mi infastidiscono questi trucchi da baraccone, alla pari di "ti blocco il click destro così non ti faccio copiare il mio contenuto"... dai su, di cosa stiamo parlando?!

...poi, capisco il paste ma che c'entrano il copy e il cut???

L'ideale sarebbe modificare la funzione in modo da impedire l'inserimento dello zero

Se lo impedisci a prescindere allora non potresti inserire nessun numero che abbia uno zero, per quanto sia maggiora di zero; cioè non potresti inserire 10, ad esempio, o 20 o 1230 o qualsiasi altro valore che non sia solo zero ma abbia un qualsivoglia zero al suo interno.

Il titolo della discussione ("Permettere solo numeri maggiori di zero") è chiaramente più esplicativo di quanto hai indicato poi.

e, se possibile, impedire il "paste", senza pasticciare il codice HTML

Gli eventi applicati come attributi sporcano il codice HTML a prescindere. Per mantenere il codice HTML pulito è buona norma applicare gli eventi via JavaScript.

Se ti serve qualcosa di funzionale, costruisciti un campo in cui viene filtrato ciò che viene inserito (qualsiasi cosa sia) e hai quello che ti serve.

Puoi usare l'evento input (supportato da tutti gli odierni browser) che viene innescato ogni qualvolta cambia il contenuto del campo (che si digiti dentro o si incolli qualcosa), quindi filtrare (ad esempio con un'espressione regolare) il valore del campo stesso e limitarlo ad un valore minimo (ad esempio con i metodi Math).

Qui uno snippet fatto su due piedi:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
   </head>
   <body>
      <input type="text" name="km" class="form-control" id="km" placeholder="Digita i chilometri" required>
      <script>
         document.getElementById('km').addEventListener('input', function(){
            this.value = this.value.replace(/\D/g,'');                     // Consento solo cifre numeriche
            if (this.value !== '') this.value = Math.max(1, this.value);   // Se il valore non è vuoto lo limito ad un minoimo di 1 
         });
      </script>
   </body>
</html>

Certamente esistono millemila altre soluzioni ma, ti prego, se io voglio copiare, tagliare o incollare qualsiasi cosa nel mio browser, non impedirmi di farlo, altrimenti mi diventi antipatico

PS: un consiglio, se i dati inseriti vanno processati lato server e tu non sei uno sprovveduto, ricordati che gli stessi controlli usati lato client, per "aggiustare" i valori inseriti, è buona norma effettuarli analogamente lato server; perché tu puoi anche impedire di copiaincollare qualsiasi cosa nel tuo campo di testo ma l'utente smaliziato (al quale sei diventato antipatico) ci mette poco a pigiare F12 sul suo browser, inserire l'immondezza dentro i tuoi campi e darla in pasto al server

**Roby140569** · 16-04-2019, 15:58

Grazie per la risposta, non capisco solo il tuo tono livemente polemico, ma sicuramente mi sto sbagliando...

Sì, anche a me non piacciono quei "trucchi da baraccone" come li chiami tu, infatti vorrei adottare una soluzione più pulita.

Col tuo codice l'utente quando scrive 0, gli viene corretto in 1 e questa cosa non mi piace.

Così come ti sembra? Se l'utente scrive un valore minore o uguale a zero, viene pulito il campo.

codice:

<script>
         document.getElementById('km').addEventListener('input', function(){
            this.value = this.value.replace(/\D/g,'');  
            if (this.value <= '0') this.value = '';  
         });
      </script>

Ovviamente c'è un controllo lato server dei dati.

**KillerWorm** · 16-04-2019, 16:56

Grazie per la risposta, non capisco solo il tuo tono livemente polemico, ma sicuramente mi sto sbagliando...

Figurati, hai ragione, scusa il tono polemico, chiaramente nulla di personale, solo (come già detto) mi irritano i giochetti che limitano le normali funzionalità del mio browser; certo, poi capisco che il tuo intento resta solo quello di impedire l'inserimento di possibili valori anomali.

Sì, anche a me non piacciono quei "trucchi da baraccone" come li chiami tu, infatti vorrei adottare una soluzione più pulita.

Giusto

Col tuo codice l'utente quando scrive 0, gli viene corretto in 1 e questa cosa non mi piace.

Giusto anche questo.

Così come ti sembra?
[...]

Ti direi che non può andare bene; giusto qualche osservazione:

1 - nella condizione (this.value <= '0') basterebbe l'operatore di uguaglianza (this.value == '0') dal momento che non è possibile che ci sia il segno meno (perché verrebbe rimosso eventualmente nella riga antecedente). Questo è giusto a livello concettuale, perché il funzionamento, usando l'uno o l'altro operatore, sarebbe identico in questo contesto. E' una questione pressoché irrilevante.

2 - se si esegue un copiaincolla in cui sono presenti uno o più zeri iniziali (seguiti da altre cifre numeriche) o addirittura due o più zeri (senza nessun altra cifra numerica), il valore non viene corretto, restano gli zeri. Nel primo caso (ad esempio, se scrivo 0123) a livello matematico potrebbe essere accettabile (perché equivale al valore 123) ma, nel secondo caso (ad esempio, se scrivo 0000) questo resta invariato (per cui equivale al valore 0). E' una questione che compromette il risultato.

In tal senso direi che la soluzione non soddisfa la tua richiesta.

Nello script che ti ho proposto, il metodo Math.max ha la duplice funzione di convertire il valore "testuale" (prelevato dal campo) in valore numerico, oltre che fissare il limite minimo. Per tale motivo anche copiaincollando dei valori con degli 0 iniziali, questi vengono sempre convertiti.

In conclusione, impostando a dovere l'espressione regolare è possibile rimuovere eventuali zeri iniziali e risolvere come da tue esigenze.
Qui una soluzione:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
   </head>
   <body>
      <input type="text" name="km" class="form-control" id="km" placeholder="Digita i chilometri" required>
      <script>
         document.getElementById('km').addEventListener('input', function(){
            this.value = this.value.replace(/(?:^\D*0+)|\D/g,''); // Ripulisco il valore rimuovendo qualsiasi 0 iniziale e qualsiasi cifra non numerica
         });
      </script>
   </body>
</html>

**Roby140569** · 16-04-2019, 19:01

Grazie per tutto!
Faccio un po' di test ti faccio sapere!

Giusto per chiarezza: il contesto è una webapp ad uso interno di un cliente che si occupa di noleggio con conducente e, mettendo paletti vari, vorrei venire incontro alle sue esigenze e limitare il più possibile gli errori di inserimento dati.

Discussione: Permettere solo numeri maggiori di zero in un campo di testo

Strumenti discussione

Ricerca discussione

Visualizza

Permettere solo numeri maggiori di zero in un campo di testo

Permessi di invio