1

Preciso inserir algumas macros em uma área de texto, estas macros podem ser inseridos em qualquer lugar do campo, atualmente eu apenas utilizo um append que apenas coloca a macro no começo.

Estou pensando em pegar as coordenadas do click com clientX - ClientY e quando for inserir a macro utilizar estas coordenadas para inserção.

Exemplo:

 $("#inserirMacro").click(function() {
   // Pega o macro selecionado.
   var macro = $("#macros :selected").text();
   // Inseri o macro no  começo do campo textarea
   $('#campo').append(macro);
 });

 // Pega as coordenadas do click no textArea.
 $("#campo").mousedown(function(e) {
   console.log(e.clientX + ' ClientX ' + e.clientY + ' ClientY');
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="macros">
  <option>[NOMECLIENTE]</option>
  <option>[CPF]</option>
  <option>[TELEFONE]</option>
  <option>[TELEFONE2]</option>
</select>
<button type="button" id="inserirMacro">Inserir</button>
<br>
<textarea rows="4" id="campo"></textarea>

Como posso usar estas coordenadas para fazer a inserção das macros nos lugares corretos ?

4
  • Para colunas eu não sei, mas para linhas você pode adicionar um "\n" para trocar a linha.
    – Shura16
    4/11/2015 às 11:41
  • Desenvolvi um versão rápida do que você precisa, veja no jsFiddle. Ao meu ver, do jeito que você quer fazer vai dar trabalho, o posicionamento no <textarea> vai ser muito relativo a tamanho da font e tamanho da string, além de que você vai ter que varrer todo o <textarea> para adequar a nova string que for inserida e verificar se não vai sobrepor uma já existente, uma alternativa, talvez mais fácil, para oque você quer será o drag-and-drop. 4/11/2015 às 12:21
  • @devgaspa sua solução é inviável, você esta transformando todo textarea em um drag-and-drop, como o usuário vai digitar o texto dele? tem que lembrar que isso ai poderia ser um documento no word qualquer. 4/11/2015 às 12:36
  • @GabrielRodrigues me perdoe, interpretei sua intenção errado, mas a lógica para localizar o x~y e inserir no <textarea> é por este caminho. 4/11/2015 às 12:40

1 Resposta 1

1

Gabriel, acredito que seja melhor pegar a posição do cursor no textarea.

var selection = {};
selection.Start = 0;
selection.End = 0;

var campo = $("#campo");
var inserirMacro = $("#inserirMacro");
var macros = $("#macros");

inserirMacro.click(function() {
  // Pega o macro selecionado.
  var macro = macros.children(":selected").text();
  var pre = campo.val().substring(0, selection.Start);
  var pos = campo.val().substring(selection.End);  
  campo.val(pre + macro + pos);  
  
  selection.End = selection.Start += macro.length;
  campo.prop("selectionStart", selection.Start);
  campo.prop("selectionEnd", selection.End);
  campo.focus();
});

campo.on("keyup keypress blur input", function () {
  selection.Start = campo.prop("selectionStart");
  selection.End = campo.prop("selectionEnd");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="macros">
  <option>[NOMECLIENTE]</option>
  <option>[CPF]</option>
  <option>[TELEFONE]</option>
  <option>[TELEFONE2]</option>
</select>
<button type="button" id="inserirMacro">Inserir</button>
<br>
<textarea rows="4" id="campo"></textarea>

neste caso a macro será inserida na região da textarea que o usuário estava trabalhando.

5
  • Bacana demais! você sabe por que quando e inserido no meio de um conteúdo o restante dele é "selecionado" exemplo "helloWorld", insira um macro no "W" 18/02/2016 às 19:22
  • @GabrielRodrigues, qual o browser que esta utilizando? tentei inserir a macro [NOMECLIENTE] entre ao final da palavra Hello em HelloWolrd, o resultado foi Hello[NOMECLIENTE]World, o restante do texto não ficou selecionado e o cursor foi deslocado para depois da macro... em todo caso vou tentar realizar uma melhoria. 18/02/2016 às 19:26
  • Aconteceu nas Ultimas versões do Firefox 44.0.2 e Google Chrome 48.0.2564 18/02/2016 às 19:34
  • @GabrielRodrigues, realizei uma pequena alteração/melhoria, caso algum texto esteja selecionado, a macro irá substituir o texto selecionado... por exemplo... caso selecione o W em Hello World e insira a macro [NOMECLIENTE], o resultado será Hell[NOMECLIENTE]orld 18/02/2016 às 19:34
  • Ficou show, é isso mesmo, olha só o que eu estava fazendo em vez de ter esta opção de inserir macro: s15.postimg.org/e3erimb6z/macro.png uhauah, agora vai ficar bem melhor. 18/02/2016 às 19:45

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 .