7

Tenho um <textarea> que irá funcionar como um pequeno editor de código-fonte.
Queria que, ao pressionar o Tab, incluísse um recuo no texto ao invés de colocar o foco no próximo elemento, que é o comportamento padrão da tecla.
Queria que fosse possível gravar o texto formatado no banco de dados, e ao carregá-lo devolta para o <textarea>, mostrasse os recuos inseridos.

0

2 Respostas 2

7

É só interceptar o keydown quando o keyCode === 9

$('textarea').bind('keydown', function(e) {
    if(e.keyCode === 9) {
        e.preventDefault();
        var inicioDaSelecao = this.selectionStart,
            fimDaSelecao = this.selectionEnd,
            recuo = '\t'; //Experimente também com '    '
      
        this.value = [
            this.value.substring(0, inicioDaSelecao),
            recuo,
            this.value.substring(fimDaSelecao)
        ].join('');

        this.selectionEnd = inicioDaSelecao + recuo.length; 
    }    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

Você provavelmente vai precisar de um polyfill como este para tornar o código da resposta crossbrowser, já que em algumas versões do IE a seleção de texto é tratada diferente.

6

O keyCode do TAB é 9. Adicione um evento ao textarea, para quando o usuário digitar TAB, ele inserir um \t na posição atual do cursor:

document.getElementById('textedit').addEventListener('keydown', function(e) {
    if(e.keyCode === 9) { // TAB
        var posAnterior = this.selectionStart;
        var posPosterior = this.selectionEnd;

        e.target.value = e.target.value.substring(0, posAnterior)
                         + '\t'
                         + e.target.value.substring(posPosterior);

        this.selectionStart = posAnterior + 1;
        this.selectionEnd = posAnterior + 1;
 
        // não move pro próximo elemento
        e.preventDefault();
    }
}, false);
<textarea id="textedit"></textarea>

<p>
  Próximo input:<br>
  <input type="text" id="" />
</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .