Macros in coordinates related to the textarea

Question

Macros in coordinates related to the textarea

Asked 9 years ago

Viewed 89 times

1

I need to insert some macros in a text area, these macros can be inserted anywhere in the field, currently I only use one append that just puts the macro at the beginning.

I’m thinking of getting the coordinates of the click with clientX - ClientY and when inserting the macro use these coordinates for insertion.

Example:

 $("#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>

How can I use these coordinates to insert macros in the right places ?

For columns I don’t know, but for rows you can add an " n" to change the row.

– Shura16

2015/11/04 at 11:41
I developed a quick version of what you need, see on jsFiddle. The way I see it, the way you want to do it, it’s gonna take work, the positioning on the <textarea> will be very relative to font size and string size, plus you will have to scan the entire <textarea> to fit the new string that is inserted and check that it will not overwrite an existing one, an alternative, perhaps easier, for what you want will be the drag-and-drop.

– Lucas Fontes Gaspareto

2015/11/04 at 12:21
@devgaspa your solution is unviable, you’re turning every textarea into a drag-and-drop, how will the user type his text? have to remember that this could then be a document in any word.

– Gabriel Rodrigues

2015/11/04 at 12:36
@Gabrielrodrigues forgive me, I interpreted your intention wrong, but the logic to locate the x~y and insert in <textarea> is this way.

– Lucas Fontes Gaspareto

2015/11/04 at 12:40

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Tobias Mesquita • **22,900** points · Answer 1 · 2016-02-18T19:04:45+00:00

Gabriel, I think it’s best to take the cursor position on 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>

in this case the macro will be inserted in the textarea that the user was working on.