3

Tenho o seguinte código:

$('#mais').click(function(){
  $('#console').val($('#console').val() +"+");
});

$('#menos').click(function(){
  $('#console').val($('#console').val() +"-");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="console" type="text">
<button id="mais">+</button>
<button id="menos">-</button>

Nesse código consigo inserir os caracteres no final do input sempre que clico nos botões correspondentes, mas como faço para inserir na última posição do cursor de texto dentro do input?

Exemplo:

  1. Digitei o texto:
  2. maismais
  3. Coloquei o cursor de texto no meio do texto:
  4. mais|mais
  5. Cliquei no botão -, gostaria que o resultado fosse esse:
  6. mais-mais

3 Respostas 3

2

Este script faz o que propõe. Ele insere o sinal do botão clicado e mantém o cursor focado no campo.

Sugiro que simplifique o código: em vez de usar duas funções para cada botão, use apenas uma:

$('#mais, #menos').click(function(e){
   insereSinal('#console', e.target.textContent);
});

$('#mais, #menos').click(function(e){
   insereSinal('#console', e.target.textContent);
});

function insereSinal(cId, sinal){
   var cam = $(cId)[0];
   var cvl = $(cam).val();
   var cps = cam.selectionStart;
   var ini = cvl.substring(0, cps);
   var fim = cvl.substring(cps, cvl.length);
   $(cam).val(ini+sinal+fim);
   cps += sinal.length;
   cam.selectionStart = cam.selectionEnd = cps;
   cam.focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="console" type="text">
<button id="mais">+</button>
<button id="menos">-</button>

Se quiser a função comprimida:

$('#mais,#menos').click(function(e){insereSinal('#console',e.target.textContent);});
function insereSinal(cId,sinal){var cam=$(cId)[0];var cvl=$(cam).val();
var cps=cam.selectionStart;var ini=cvl.substring(0,cps);
var fim=cvl.substring(cps,cvl.length);$(cam).val(ini+sinal+fim);
cps+=sinal.length;cam.selectionStart=cam.selectionEnd=cps;cam.focus();}

Compatibilidade: IE9+, Edge, FF, Chrome, Safari, Opera

Fonte: SOen (com adaptações e considerável redução de código)

0
2

Olá!

Assim funcionou!

var element = $('#console');

$('#mais').click(function(){
	addChar('+', element);
});

$('#menos').click(function(){
	addChar('-', element);
});
 
function addChar(c, el) {
  var text = el.val();
  var pos = el[0].selectionStart;		// posição do cursor
  
  // insere o caracter
  el.val(text.substring(0, pos) + c + text.substring(pos));
  
  // voltar para o input
  el.focus();
  
  // posicionar o cursor na ultima posição
  el[0].selectionStart = pos + 1;
  el[0].selectionEnd = pos + 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="console" type="text">
<button id="mais">+</button>
<button id="menos">-</button>

Adaptado de https://stackoverflow.com/a/15977052/5789135

3
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão
    – NoobSaibot
    Commented 22/11/2017 às 1:00
  • Editei a resposta.
    – Vitor E.C.
    Commented 22/11/2017 às 1:04
  • Para ficar melhor teria como explicar sua resposta ?
    – NoobSaibot
    Commented 22/11/2017 às 1:08
1

Esta função javascript permitirá inserir facilmente texto em um input onde o cursor estiver.

Neste caso o sinal + ou - no onclick dos botões

onclick="inserirSinal('console', '-') 

ou

onclick="inserirSinal('console', '+')

function inserirSinal(inputId, text) {
  var input = document.getElementById(inputId);
  if (!input) { return; }
  var scrollPos = input.scrollTop;
  var strPos = 0;
  var br = ((input.selectionStart || input.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) );
  if (br == "ie") {
    input.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -input.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = input.selectionStart;
  }

  var front = (input.value).substring(0, strPos);
  var back = (input.value).substring(strPos, input.value.length);
  input.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    input.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart ('character', -input.value.length);
    ieRange.moveStart ('character', strPos);
    ieRange.moveEnd ('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    input.selectionStart = strPos;
    input.selectionEnd = strPos;
    input.focus();
  }

  input.scrollTop = scrollPos;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="console" type="text" value="maismais">
<button id="mais" onclick="inserirSinal('console', '-');return false;">-</a>
<button id="menos" onclick="inserirSinal('console', '+');return false;">+</a>

Firefox, IE7, Opera, Safari e Chrome.

Créditos

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 .