Angularjs: una semplice direttiva per la gestione testo

Le caselle di input sono uno strumento fondamentale per ogni sito ma in alcune situazioni il loro comportamento standard può risultare fastidioso: stiamo parlando della mancata selezione di tutto il testo al focus sul controllo.

One click, All Text!

Per ovviare a questa mancanza AngularJs ci offre una soluzione semplice tramite le direttive. Una delle caratteristiche più interessanti del framework è la possibilità di estendere e di creare quest’ultime; non di meno AngularJS è un ottimo framework su cui sviluppare dei tool personali da riusare più volte.

Ma bando alle ciance e cominciamo subito a  creare una direttiva che permetta con un solo click di selezionare tutto il testo nella casella di input:

 

La direttiva è ristretta al solo uso come attributo (la linea restrict:’A’) ed inoltre la funzione setSelectionRange garantisce la compatibilità con i dispositivi mobili, in particolare Safari.

Per utilizzarla è sufficiente inserirla nel modulo Angularjs del sito, per comodità di seguito un esempio ( Download ):