Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    665

    Permettere solo numeri maggiori di zero in un campo di testo

    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!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,324
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    665
    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.
    Ultima modifica di Roby140569; 16-04-2019 a 16:02

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,324
    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>
    Ultima modifica di KillerWorm; 16-04-2019 a 17:05 Motivo: corretto lo script
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    665
    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.
    Ultima modifica di Roby140569; 16-04-2019 a 19:07

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.