[HTML-JSP] Formattazione testo input

[Gianluca99]

Salve, mi servirebbero un po' di consigli su come affrontare un problema

ho un banale form contenente un input box e un tasto "invia"
sto cercando un modo per formattare in tempo reale un certo input dato sul'input box

esempio:
inserisco la cifra 1234567890 sull'inputbox, mentre sto digitando voglio che la cifra venga formattata in questo modo : 1.23.45.67.890
ovvero, un punto dopo la prima cifra, un punto dopo la seconda e la terza, un punto dopo la quarta e la quinta e un punto dopo la sesta e la settima per un totale di 10 cifre e 4 punti.

Con il tasto "invia" caricherò poi il valore formattato su una variabile da utilizzare altrove

Avevo pensato di aggirare il problema inserendo un input box per ogni gruppo di cifre per poi unirle aggiungendo il "." tra loro ma non credo sia l'idea migliore...

Grazie in anticipo per l'aiuto che potrete darmi

[cicciopasticcio1]

All'evento onchange associ una funzione che attraverso una regex (ad esempio) legge solo le cifre e non i punti,

inputBox.value.match(/\d/g).join('')

estrai prima cifra, seconde due cifre etc e le unisci coi punti gestendo eventuali errori (testo più corto del previsto) eccetera eccetera.

Il testo verrà formattato durante l'inserimento. E' più facile a farsi che a dirsi! Dovresti fare solo dei calcoletti matematici per la lunghezza delle stringhe in modo da non generare errori, o gestire gli errori con blocchi try catch, o trovare un metodo che ti formatti la stringa automaticamente.

[Gianluca99]

quindi teoricamente:
- controllo che i caratteri inseriti siano solo cifre
- estraggo i gruppi di cifre (prima, seconda e terza, quarta e quinta,...)
- unisco i gruppi di cifre con il "." formattando il testo

solo non saprei come estrarre le cifre che mi interessano

pensavo di creare una funzione che all'evento onchange legga il numero di caratteri inseriti e che inserisca il punto dopo la prima cifra, dopo la terza e così via
esempio:

funzione aggiungipunto() {

if inputbox.length=1
aggiungi "."

if inputbox.length=4 //compreso il . inserito in precedenza
aggiungi "."

...
+controlli vari
+gestione errori }

potrebbe andare ugualmente? solo non saprei come aggiungere alla stringa esistente il valore "."

[cicciopasticcio1]

Originariamente inviato da Gianluca99

quindi teoricamente:
- controllo che i caratteri inseriti siano solo cifre
- estraggo i gruppi di cifre (prima, seconda e terza, quarta e quinta,...)
- unisco i gruppi di cifre con il "." formattando il testo

solo non saprei come estrarre le cifre che mi interessano

pensavo di creare una funzione che all'evento onchange legga il numero di caratteri inseriti e che inserisca il punto dopo la prima cifra, dopo la terza e così via
esempio:

funzione aggiungipunto() {

if inputbox.length=1
aggiungi "."

if inputbox.length=4 //compreso il . inserito in precedenza
aggiungi "."

...
+controlli vari
+gestione errori }

potrebbe andare ugualmente? solo non saprei come aggiungere alla stringa esistente il valore "."

Se non lo sai cerchi, in javascript ci sono le funzioni substring e substr che ti interessano per estrarre tot caratteri alla posizione x. E' molto semplice.

Questa soluzione è ottima perchè:
- include anche un filtro (non devi controllare che i caratteri inseriti siano solo cifre, li elimina automaticamente)
- si effettua un ricalcolo completo, che non crea problemi in caso di cancellazione del testo. anche se non è uno dei sistemi più intuitivi.

Se vuoi una cosa tipo campo IP della configurazione ip di windows, c'è da scriverci sopra un poco oppure affidarsi a librerie http://digitalbush.com/projects/masked-input-plugin/

Se vuoi una cosa con poca fatica ed orginata, usa quel plugin per jquery.

[Gianluca99]

Originariamente inviato da cicciopasticcio1

Se non lo sai cerchi, in javascript ci sono le funzioni substring e substr che ti interessano per estrarre tot caratteri alla posizione x. E' molto semplice.

Questa soluzione è ottima perchè:
- include anche un filtro (non devi controllare che i caratteri inseriti siano solo cifre, li elimina automaticamente)
- si effettua un ricalcolo completo, che non crea problemi in caso di cancellazione del testo. anche se non è uno dei sistemi più intuitivi.

Se vuoi una cosa tipo campo IP della configurazione ip di windows, c'è da scriverci sopra un poco oppure affidarsi a librerie http://digitalbush.com/projects/masked-input-plugin/

Se vuoi una cosa con poca fatica ed orginata, usa quel plugin per jquery.

grazie mille sono riuscito a risolvere

[cicciopasticcio1]

Originariamente inviato da Gianluca99

grazie mille sono riuscito a risolvere

Se puoi posta il codice che hai usato, sia per te (così se c'è qualcosa che non va possiamo aiutarti) sia per quelli che cercheranno questo topic in futuro