L’altro giorno pensavo che mi sarebbe stato utile un input box che permettesse di inserire una lista di elementi, più o meno come quello che usa facebook per i destinatari dei messaggi privati:

All’inizio pensavo sarebbe stato un macello immane programmare una cosa del genere, ma ho avuto un’illuminazione  improvvisa che mi ha fatto capire come in realtà sia discretamente facile.

Non capivo come facesse FB a fare una input box  che contenesse elementi complessi. La risposta è semplice: la casella A: non è un input box ma un div mascherato da input box, invece la casella Oggetto: è una vera input box.
Per ottenere l’effetto è sufficiente settare bordi e dimensioni in modo che siano uguali per i due tipi di elementi, così da farli diventare indistinguibili.

L’unico mistero rimanente è come far si che la finta input box  mantenga la possibilità di accettare testo in ingresso. La risposta è abbastanza facile: l’ultimo elemento all’interno del div è una vera input box, fatta “scomparire alla vista” togliendogli i bordi.
Detta così sembra complicata, ma  basta dare un occhiata allo schema per capire che in realtà è molto semplice:

La textbox finale c’è ma non si vede, perché non ha i bordi. Ho fatto un concept-proof in poco meno di un’ora.