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.
Adicione um comentário
|
2 Respostas
É 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.
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>