Logo JsDir.com [niente]
Bring Your Site To Life!!!
10 Settembre 2010 - 22:22:46 - 13 scripters on-line! - La tua posizione nel sito: F.a.q. & Answers/
BedInLecce
Frequently Asked Questions (and Answers)
F.A.Q. numero 517.
È possibile avere un campo TEXT che funzioni come il display de una calcolatrice, visualizzando i separatori delle migliaia dinamicamente durante l'inserimento del numero?

Si, e non è neanche eccessivamente complicato, ecco un esempio: 
<html>

<head>

   <title>Display Calcolatrice</title>

</head>

<body>

<script>

function DoDots(numero)

   {

   numero=numero.toString().replace(/[\D^0+]/g,"");

   for (i=numero.length;i>0;i-=3)

      numero=numero.substring(0,i)+"."+numero.substr(i)

   return numero.replace(/\.+$/,"");

   }

</script>

<form>

<input 

   type="text" 

   name="numero" 

   onkeyup="this.value=DoDots(this.value)" 

   style="font-family : monospace ; text-align : right ; " /> 

</form>

</body>

</html>


Al campo testo abbiamo associato un event-handler che ad ogni pressione del tasto richiama una funzione, ed uno stile che allinea a destra il contenuto e visualizza in carattere monospazio.

L'event-handler (onkeyup) ad ogni rilascio del tasto riassegna al campo lo stesso valore attuale dopo che è passato dalla funzione DoDots().
La funzione per prima cosa elimina dal valore ricevuto (cioè il valore attuale del campo) tutti i caratteri che non siano cifre da 0 a 9 (direttiva \D della RegularExpression equivalente a [^0-9]), quindi anche i punti già inseriti nei precedenti passaggi, poi passa a "numero" il valore numerico, ripulito anche di eventuali zeri davanti al numero (parte "^0+", ovviamente non significativi) che qualche browser consente di inserire usando i tasti cursore.
Il ciclo successivo (già visto nello script dell'Convertitore Euro <=> Lire) spazza la variabile, a partire da destra, aggiungendo un punto ogni tre caratteri, infine ritorna il valore togliendo l'ultimo carattere (un punto) sempre inserito dal ciclo..

Faq presenti: 515 - Elenca le faq della categoria:
Elenca le 20 FAQ&A più richieste!     Elenca tutte le FAQ

Cerca nelle FAQ...
Testuale
Numero




Per navigare correttamente il sito è necessario abilitare i cookies.
Enjoy Open Source!
ffx80wh1

    documenti
 
 
 
         Stampa
          Segnala
          Preferiti





ffx1203