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.
Author: Fantantonio
Date: 11-02-2023
Categories: devtips
Tags: javascript html textarea tab tabulation