Hoje vamos a uma dica simples e rápida. Como todo campo de formulário do HTML o comportamento padrão do textarea quando pressionamos a tecla tab é ir para o próximo campo. Mas em alguns casos, queremos simplesmente adicionar uma tabulação no conteúdo de texto dele.

Isto pode ser feito via javascript, primeiro devemos adicionar um evento de pressionar teclas e verificamos se a tecla pressiona é a tab. Se sim chamamos o event.preventDefault() que cancela o comportamento padrão de ir para o próximo campo de formulário.

<textarea rows="10"></textarea>

<script>
const textarea = document.querySelector('textarea');
textarea.addEventListener('keydown' , function(event){
    if(event.key === 'Tab'){
        //tab pressionada
        event.preventDefault();
    }
});
</script>

Agora devemos inserir um "\t" no lugar, o que não é só concatenar ele no final do conteúdo, já que o usuário pode estar editando em qualquer parte do texto. Então devemos pegar a posição da seleção do curso. Fazemos isso através das propriedades selectionStart e selectionEnd do textarea que retorna, respectivamente, a posição de início e final da seleção do texto.

Tendo esses valores podemos pegar todo o texto antes da seleção através do método substring, que retorna um pedaço de uma string dada uma posição de início e uma final. Também pegamos todo o texto depois da seleção através do método substring, mas omitimos a posição final desejada retornando assim até o final da string. Agora concatenamos o antes da seleção com o caractere de tabulação "\t" e em sequencia com o depois da seleção e atribuímos novamente para o valor do textarea.

const start = textarea.selectionStart;
const end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + "\t" + textarea.value.substring(end);

Se você chegou a testar deve ter notado que já esta funcionando, mas com inconveniente do cursor indo parar no final do conteúdo do textarea e não logo após a tabulação. Para resolver isso basta, atribuir para o selectionStart e selectionEnd do textarea o valor do início da seleção original +1 (para ficar deposi do tab inserido).

textarea.selectionStart = start+1;
textarea.selectionEnd = start+1;

Agora só para constar tudo junto:

<textarea class="form-control" rows="10"></textarea>
        
<script>
const textarea = document.querySelector('textarea');

textarea.addEventListener('keydown' , function(event){
    if(event.key === 'Tab'){
        event.preventDefault();
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        textarea.value = textarea.value.substring(0, start) + "\t" + textarea.value.substring(end);
        
        textarea.selectionStart = start+1;
        textarea.selectionEnd = start+1;
    }
});
</script>

Você pode ver o exemplo de tab no textarea funcionando aqui.

Bom era isso, simples mas quebra um galho. T++.