Come tabulare nelle textarea

Poche righe di codice per aggiungere la tabulazione nelle textarea

Tabulare nelle textarea senza cambiare elemento

Quando farlo e quando no

Hai appena inserito una textarea nel tuo HTML ma se premi il tasto Tab quello che succede è che il focus si sposta sul prossimo elemento HTML.

Come fare invece ad inserire la tabulazione all'interno della textarea?

Premetto che non è buona cosa farlo su pagine pubbliche che possono essere visitate anche da persone che navigano utilizzando strumenti dedicati all'accessibilità. Quello che accade infatti è modificare il modo in cui l'utente si aspetta che funzionino.

Ma se la pagina è privata, dedicata all'amministratore per esempio, e quindi non soggetta alle stesse attenzioni che è necessario porre all'accessibilità delle pagine pubbliche, modificare il modo in cui i web browser gestiscono il Tab all'interno della textarea può tornare davvero comodo.

Come tabulare nelle textarea

Per farlo bastano poche righe di JavaScript come queste:

    
let textareas = document.getElementsByTagName("textarea");
for (let i = 0; i < textareas.length; i += 1) {
    textareas[i].onkeydown = function(event) {
        if (event.keyCode == 9 || event.which == 9) {
            event.preventDefault();
            let s = this.selectionStart;
            this.value = this.value.substring(0, this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
            this.selectionEnd = s + 1;
        }
    }
}

In poche parole, si cicla su tutte le textarea e per ognuna si aggiunge un listener. In caso venga premuto il tasto Tab si previene il comportamento di default che sposta il focus sull'elemento successivo, e al suo posto si inserisce una tabulazione tra il blocco di testo prima della posizione del cursore e quello successivo.

Nulla di più semplice.

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 11/02/2023

Categories: devtips

Tags: javascript html textarea tab tabulation