Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Inputmask completamento automatico di "zeri"

    Ciao a tutti,
    ho un quesito da porvi.
    Ho un input nel quale devo inserire un numero composto da 8 cifre.

    Vorrei che quando si digita il primo numero appaia la seguente condizione:
    00000001

    e quindi continuando a digitare ho la seguente condizione:
    00000012

    ecc ... in modo tale da far evitare di inserire anche gli zero che appaiono in complemamento automatico.

    Grazie mille a tutti voi in anticipo.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, in gergo tecnico, l'operazione di anteporre una serie di zeri per completare un numero prestabilito di cifre ad una stringa, è detta "zero padding" (o "leading zeros"), letteralmente "imbottitura di zero iniziali". Puoi fare qualche ricerca con termini del genere per reperire maggiori informazioni.

    Considera che JavaScript non ha una funzione nativa per compiere questa operazione, come può essere invece per altri linguaggi di programmazione, ma con qualche ricerca puoi trovare delle soluzioni più o meno semplici per mettere su una funzione del genere.

    Dovrai quindi costruirti prima di tutto questa funzione che, passando un valore, lo restituisca imbottito degli zeri. A quel punto puoi richiamarla sull'evento oninput dell'elemento input in questione (e/o sull'onkeyup e/o sull'onchange) passandogli ad esempio il valore attraverso this.value, per cui il valore restituito dovrà essere "riapplicato" al value nell'input stesso.

    Tieni conto che puoi incontrare delle difficoltà sulla gestione del valore passato alla funzione che la prima volta potrebbe essere un numero senza zeri iniziali ma, una volta che sarà applicato il padding, la seconda volta la funzione riceverà quello stesso valore con gli zeri. In tal caso dovrai ripulire il valore dagli eventuali zeri prima di riapplicare il padding; potresti semplicemente convertirlo in valore numerico prima di eseguire il padding.

    Più facile a farsi che a dirsi.

    Per il momento ti ho dato qualche input su cui lavorare, vedi se riesci a combinare qualcosa da te con qualche ricerca; se incontri problemi fai sapere.

    Qualcuno potrebbe comunque fornirti qualcosa di già pronto ma personalmente preferisco che almeno si prov primai a costruire qualcosa da se stessi, avendo ovviamente le opportune informazioni su come procedere.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ho provato una soluzione ma non penso che sia ancora quella corretta:

    codice:
    var numero = $("#numero").val();
    
      $("#numero").val(String("00000000" + numero).slice(-8));
      numero =$("#numero").val();
    Al primo inserimento mi crea un numero di otto cifre con 7 zero davanti poi inserendo gli altri vanno a scalare:
    00000001
    00000012

    ma se continuo ad inserire i numeri continua a prendermi l'ultimo inserito e a scalare tutti gli altri.
    Penso che sia il caso di dare un blocco al tutto inserendo otto numeri o sbaglio?
    Se inserisco il data-mask nell'input il tutto non funziona pi� dopo aver inserito il primo numero, mi rimane in questo modo:
    1_______

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Se inserisco il data-mask nell'input il tutto non funziona pi� dopo aver inserito il primo numero
    "data-mask" sarebbe?
    Puoi postare il codice completo di ciò che hai fatto? cioè la parte HTML e la parte JavaScript, compreso il modo che hai usato per applicare il controllo del valore inserito. Giusto per poter riprodurre il problema che riscontri.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Ecco a te:

    codice:
    <script>
    function padStart(value, targetLength,padString) {
      targetLength = targetLength>>0; //floor if number or convert non-number to 0;
      padString    = String(padString || ' ');
    
    
      if (value.length > targetLength) {
        return String(value);
      }
      else {
        targetLength = targetLength-value.length;
    
    
        if (targetLength > padString.length) {
          padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
        }
    
    
        return padString.slice(0,targetLength) + String(value);
      }
    }
    //funzione​
    function check_numero()
    {
    var numero = $("#numero").val();
    
    
      $("#numero").val(String("00000000" + numero).slice(-8));
      numero =$("#numero").val();
    };
    </script>
    HTML
    
    <div class="form-group" id="box_numero">
                        <label >Numero</label> <span style="color:#ff0000">*</span> <div id="check_mc"class="pull-right"></div>
                         <input type="text" class="form-control" name="num" id="numero" autocomplete="off" onkeyup="check_numero();" required ><!-- data-inputmask='"mask": "99999999"' data-mask-->
            </div>

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ho capito ciò che intendi per limitare a 8 caratteri. Non ho idea di come funzioni quel data-mask (che nel tuo codice è commentato). Ho fatto comunque varie prove per cercare di capire come può essere impostato il tutto. Deduco che in quell'input andranno inserite solo cifre numeriche e chiaramente questo controllo non c'è (immagino che sia possibile farlo con quel data-mask ma non entro in merito al discorso).

    Personalmente sono arrivato a questa conclusione:
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script>
             $(function(){
             
                $('#numero').on('input', function(){
                   var val = +this.value.replace(/[^\d]*/g,'');                   // Ottengo il valore numerico rimuovendo qualsiasi altro eventuale carattere
                   if (val.toString().length > 8) val = $(this).data('val') || 0; // Limito la lunghezza ad 8 caratteri, se maggiore allora uso il vecchio valore inserito in precedenza
                   $(this).data('val', val);                                      // Memorizzo il nuovo valore numerico
                   this.value = String("00000000" + val).slice(-8);               // Zero padding
                });
                
             });
          </script>
    
          <style>
    
          </style>
       </head>
       <body>
          <input type="text" id="numero" placeholder="00000000" required >
       </body>
    </html>
    Ho usato l'evento input che copre al meglio tutte le varie interazioni che si possono fare per inserire un qualche valore dentro un campo input (ad esempio anche con un copia-incolla). Preciso però che questo evento non è supportato da versioni precedenti a IE9. Il resto dello script è commentato. Fai qualche prova e vedi se per te può andare bene.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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 © 2024 vBulletin Solutions, Inc. All rights reserved.