Inserindo um texto onde o cursor está usando o Javascript / jquery

Eu tenho uma página com muitas checkboxs de texto. Quando alguém clica em um link, eu quero que uma palavra ou duas sejam inseridas onde o cursor está ou anexado à checkbox de texto que tem o foco.

Por exemplo, se o cursor / foco estiver em uma checkbox de texto dizendo “apple” e ele clicar em um link dizendo “[email]”, quero que a checkbox de texto diga “apple bob@example.com”.

Como posso fazer isso? Isso é possível, já que o foco está em um elemento de rádio / suspenso / sem checkbox de texto? O último foco na checkbox de texto pode ser lembrado?

Use isso, daqui :

function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); if (!txtarea) { return; } var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false)); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") { strPos = txtarea.selectionStart; } var front = (txtarea.value).substring(0, strPos); var back = (txtarea.value).substring(strPos, txtarea.value.length); txtarea.value = front + text + back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var ieRange = document.selection.createRange(); ieRange.moveStart('character', -txtarea.value.length); ieRange.moveStart('character', strPos); ieRange.moveEnd('character', 0); ieRange.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } 
  Click Here to Insert 

Talvez uma versão mais curta seja mais fácil de entender?

  jQuery("#btn").on('click', function() { var $txt = jQuery("#txt"); var caretPos = $txt[0].selectionStart; var textAreaTxt = $txt.val(); var txtToAdd = "stuff"; $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) ); }); 
    

A resposta aprovada de George Claghorn funcionou muito bem simplesmente inserindo texto na posição do cursor. Se o usuário selecionou o texto, e você quer que o texto seja substituído (a experiência padrão com a maioria dos textos), você precisa fazer uma pequena alteração ao definir a variável ‘voltar’.

Além disso, se você não precisa suportar versões mais antigas do IE, as versões modernas suportam textarea.selectionStart, para que você possa remover toda a detecção do navegador e o código específico do IE.

Aqui está uma versão simplificada que funciona para o Chrome e IE11, pelo menos, e lida com a substituição do texto selecionado.

 function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var caretPos = txtarea.selectionStart; var front = (txtarea.value).substring(0, caretPos); var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length); txtarea.value = front + text + back; caretPos = caretPos + text.length; txtarea.selectionStart = caretPos; txtarea.selectionEnd = caretPos; txtarea.focus(); txtarea.scrollTop = scrollPos; } 

O código acima não funcionou para mim no IE. Aqui está algum código baseado nesta resposta .

Eu tirei o getElementById para que eu pudesse referenciar o elemento de uma maneira diferente.

 function insertAtCaret(element, text) { if (document.selection) { element.focus(); var sel = document.selection.createRange(); sel.text = text; element.focus(); } else if (element.selectionStart || element.selectionStart === 0) { var startPos = element.selectionStart; var endPos = element.selectionEnd; var scrollTop = element.scrollTop; element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length); element.focus(); element.selectionStart = startPos + text.length; element.selectionEnd = startPos + text.length; element.scrollTop = scrollTop; } else { element.value += text; element.focus(); } } 
 input{width:100px} label{display:block;margin:10px 0} 
    

usando @quick_sliv resposta:

 function insertAtCaret(el, text) { var caretPos = el.selectionStart; var textAreaTxt = el.value; el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos); }; 

Como inserir algum texto na posição atual do cursor de um TextBox por meio de JQuery e JavaScript

Processo

  1. Encontre a posição atual do cursor
  2. Obter o texto a ser copiado
  3. Definir o texto ali
  4. Atualize a posição do cursor

Aqui eu tenho 2 TextBoxes e um Button. Eu tenho que clicar em uma determinada posição em uma checkbox de texto e, em seguida, clique no botão para colar o texto da outra checkbox de texto para a posição da checkbox de texto anterior.

A questão principal aqui é que pegar a posição atual do cursor onde vamos colar o texto.

 //Textbox on which to be pasted  //Textbox from where to be pasted  //Button on which click the text to be pasted   

Acho que você poderia usar o seguinte JavaScript para rastrear a última checkbox de texto:

  

Uso:

   

Uma solução anterior (props para gclaghorn) usa textarea e calcula a posição do cursor também, então pode ser melhor para o que você quer. Por outro lado, este seria mais leve, se é isso que você está procurando.

Adicionar texto à posição atual do cursor envolve duas etapas:

  1. Adicionando o texto na posição atual do cursor
  2. Atualizando a posição atual do cursor

Demonstração: https://codepen.io/anon/pen/qZXmgN

Testado no Chrome 48, Firefox 45, IE 11 e Edge 25

JS:

 function addTextAtCaret(textAreaId, text) { var textArea = document.getElementById(textAreaId); var cursorPosition = textArea.selectionStart; addTextAtCursorPosition(textArea, cursorPosition, text); updateCursorPosition(cursorPosition, text, textArea); } function addTextAtCursorPosition(textArea, cursorPosition, text) { var front = (textArea.value).substring(0, cursorPosition); var back = (textArea.value).substring(cursorPosition, textArea.value.length); textArea.value = front + text + back; } function updateCursorPosition(cursorPosition, text, textArea) { cursorPosition = cursorPosition + text.length; textArea.selectionStart = cursorPosition; textArea.selectionEnd = cursorPosition; textArea.focus(); } 

HTML:

 

A resposta aceita não funcionou para mim no Internet Explorer 9. Eu verifiquei e a detecção do navegador não estava funcionando corretamente, detectou ff (Firefox) quando eu estava no Internet Explorer.

Eu fiz essa alteração:

 if ($.browser.msie) 

Ao invés de:

 if (br == "ie") { 

O código resultante é este:

 function insertAtCaret(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if ($.browser.msie) { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } 

Este plugin jQuery fornece uma maneira pré-feita de manipulação de seleção / cursor.

você só pode focar a checkbox de texto necessária e inserir o texto lá. Não há como descobrir onde o foco é AFAIK (talvez interating em todos os nós DOM?).

verifique este stackoverflow – ele tem uma solução para você: Como descubro qual elemento DOM tem o foco?

Conteúdo Editável, HTML ou qualquer outro elemento DOM Seleções

Se você está tentando inserir no cursor em um

, isso se torna muito mais difícil, especialmente se houver filhos dentro do contêiner editável.

Eu tive muita sorte de usar a biblioteca Rangy :

Tem uma tonelada de ótimos resources, como:

  • Salvar posição ou seleção
  • Então, mais tarde, restaurar a posição ou seleção
  • Obter seleção HTML ou Plaintext
  • Entre muitos outros

A demonstração on-line não estava funcionando na última vez que verifiquei, mas o repo tem demonstrações de trabalho. Para começar, baixe o Repo do Git ou do NPM e abra ./rangy/demos/index.html

Faz com que trabalhar com caret pos e seleção de texto seja fácil!