Inserir texto na área de texto com jQuery


151

Eu estou querendo saber como posso inserir texto em uma área de texto usando jquery, com o clique de uma marca de âncora.

Não quero substituir o texto na área de texto, quero acrescentar novo texto à área de texto.


1
Se esta é a solução - Preferiria construí-lo em mim mesmo, no entanto. É para um blog pessoal que estou fazendo para um amigo, então qualquer coisa que caiba nele.
Oliver Stubley

para selecionar um texto e, o que for selecionado, use jquery para preencher uma área de texto. Se sim, de onde vem esse texto, inserido manualmente ou de uma marca especial?
TSTamper 03/06/2009

No TStamper, desejo poder clicar em um botão e, dependendo do que é clicado, inserir texto em uma área de texto.
Oliver Stubley 03/06/2009

então, se você clicar em um botão chamado "negrito", deseja negrito na área de texto?
TStamper 03/06/2009

Não texto em negrito, mas tags em negrito (provavelmente costume em oposição a html)
Oliver Stubley

Respostas:


125

Pelo que você tem nos comentários de Jason, tente:

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})

Editar - Para anexar ao texto, veja abaixo

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val($('#area').val()+'foobar'); 
})

veja a minha resposta para uma maneira muito mais fácil de texto de acréscimo
Jason

8
@ Jason- desculpe não é verdade, espera Anexar html dados começando com um elemento html ex: <p
TStamper

E se o resultado vier de uma página PHP e manipulado pelo jQuery? (entre os dados são transmitidos usando Json)
Abu Rayane

186

Eu gosto da extensão da função jQuery. No entanto, isso se refere ao objeto jQuery e não ao objeto DOM. Então, eu o modifiquei um pouco para torná-lo ainda melhor (pode ser atualizado em várias caixas de texto / áreas de texto de uma só vez).

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
});

Isso funciona muito bem. Você pode inserir em vários lugares ao mesmo tempo, como:

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');

3
Há um rastro}) na resposta, então, a princípio, achei que a solução não estava funcionando, mas depois de corrigi-la, ela funcionou muito bem no IE7 e FF3.5. Você pode inserir um pedaço de texto no cursor para um elemento TEXTAREA. Obrigado!
Philippe

1
isso também funciona no Chrome. obrigado por me poupar algum tempo :) e obrigado a @Thinker pelo código original.
precisa saber é o seguinte

Vim aqui de uma pesquisa no google ... .Eu sei que sua resposta tem um ano, mas muito obrigado por isso. Funciona como um encanto
Mike Turley

6
Está seldestinado a ser global?
Qwertymk

1
Para qualquer um que quer a versão CoffeeScript: gist.github.com/zachaysan/7100458
zachaysan

47

Eu uso essa função no meu código:

$.fn.extend({
  insertAtCaret: function(myValue) {
    this.each(function() {
      if (document.selection) {
        this.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
        this.focus();
      } else if (this.selectionStart || this.selectionStart == '0') {
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos) +
          myValue + this.value.substring(endPos,this.value.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;
      } else {
        this.value += myValue;
        this.focus();
      }
    });
    return this;
  }
});
input{width:100px}
label{display:block;margin:10px 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Copy text from: <input id="in2copy" type="text" value="x"></label>
<label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>

Não é 100% meu, pesquisei em algum lugar do Google e depois ajustei para o meu aplicativo.

Uso: $('#element').insertAtCaret('text');


Isso destaca o texto inserido também?
Oliver Stubley 03/06

2
Mas essa solução não funcionará quando o usuário mover o cursor para algum lugar :) De qualquer forma, deixa pra lá.
Pensador

3
você usa 'this' como um conjunto embrulhado e um elemento. hmmm .. apenas tentei e não funciona sem edições #
Scott Evernden 9/09/09

4
Também não consegui que esse código funcionasse. Estou usando jQuery. Tentei uma área de texto e um campo de texto. Eu acredito que this.value, por exemplo, deve ser this.val (), etc.
Nick

1
Sim, no IE ele continuou inserindo no topo do DOM e na Fox não fez nada. Usando o JQuery mais recente ...
Caveatrob

19

Sei que essa é uma pergunta antiga, mas para as pessoas que procuram essa solução, é importante notar que você não deve usar append () para adicionar conteúdo a uma área de texto. o método append () tem como alvo innerHTML e não o valor da área de texto. O conteúdo pode aparecer na área de texto, mas não será adicionado ao valor do formulário do elemento.

Como observado acima, usando:

$('#textarea').val($('#textarea').val()+'new content'); 

vai funcionar bem.


13

este permite "injetar" um pedaço de texto na caixa de texto, injetar significa: acrescenta o texto onde está o cursor.

function inyectarTexto(elemento,valor){
 var elemento_dom=document.getElementsByName(elemento)[0];
 if(document.selection){
  elemento_dom.focus();
  sel=document.selection.createRange();
  sel.text=valor;
  return;
 }if(elemento_dom.selectionStart||elemento_dom.selectionStart=="0"){
  var t_start=elemento_dom.selectionStart;
  var t_end=elemento_dom.selectionEnd;
  var val_start=elemento_dom.value.substring(0,t_start);
  var val_end=elemento_dom.value.substring(t_end,elemento_dom.value.length);
  elemento_dom.value=val_start+valor+val_end;
 }else{
  elemento_dom.value+=valor;
 }
}

E você pode usá-lo assim:

<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>

Engraçado e com mais sentido quando temos a funcionalidade "Inserir tag no texto".

funciona em todos os navegadores.


5
@temoto: voto negativo em nomes de variáveis ​​que não sejam em inglês? Ainda é completamente legível como está. O botão de voto negativo deve ser usado se uma resposta não for útil, o que não é o caso aqui. BTW, também lhe custa uma reputação quando você baixa votos.
Josh M.

Demorou um pouco para entender o código em espanhol. e há um erro neste código. Ele foi inserido sempre no início da caixa de texto, e não no final. Por exemplo: se o texto for: Prezado usuário e ao clicar nele, ele foi inserido antes do prezado, e não após o usuário do texto.
Dev

@JoshM. o fato é que esta é uma duplicata da resposta mais antiga e completa escrita por Thinker aqui ... Ele retirou algumas das .focus()invocações e atualizações para selectionStarte selectionEndapós a modificação. Variáveis espanhóis pode ter sido usada para justificar outra resposta ...
CPHPython

12

Hej, esta é uma versão modificada que funciona bem em FF @least para mim e insere na posição de cursor

  $.fn.extend({
  insertAtCaret: function(myValue){
  var obj;
  if( typeof this[0].name !='undefined' ) obj = this[0];
  else obj = this;

  if ($.browser.msie) {
    obj.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    obj.focus();
    }
  else if ($.browser.mozilla || $.browser.webkit) {
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    var scrollTop = obj.scrollTop;
    obj.value = obj.value.substring(0, startPos)+myValue+obj.value.substring(endPos,obj.value.length);
    obj.focus();
    obj.selectionStart = startPos + myValue.length;
    obj.selectionEnd = startPos + myValue.length;
    obj.scrollTop = scrollTop;
  } else {
    obj.value += myValue;
    obj.focus();
   }
 }
})

10

você tentou:

$("#yourAnchor").click(function () {
    $("#yourTextarea").val("your text");
});

não tenho certeza sobre o realce automático, no entanto.

EDITAR :

Para anexar:

$("#yourAnchor").click(function () {
    $("#yourTextarea").append("your text to append");
});

Obrigado, vou tentar, sou novo no jQuery, portanto não conheço todas as funções fáceis de usar.
Oliver Stubley

Eu também sou relativamente novo. é divertido e super fácil quando você pega o jeito. Verificar isso para mais de referência: docs.jquery.com/Main_Page
Jason

5
Como observado por Marcus abaixo, append()não funciona no valor de a textarea. O append()método tem como alvo o innerHTML, não o valor da área de texto.
Turadg 23/06

6

O que você solicita deve ser razoavelmente direto no jQuery-

$(function() {
    $('#myAnchorId').click(function() { 
        var areaValue = $('#area').val();
        $('#area').val(areaValue + 'Whatever you want to enter');
    });
});

A melhor maneira de pensar em destacar o texto inserido é envolvê-lo em um espaço com uma classe CSS com background-color definida para a cor de sua escolha. Na próxima inserção, você pode remover a classe de qualquer extensão existente (ou retirar a extensão).

No entanto, existem muitos editores WYSIWYG HTML / Rich Text gratuitos disponíveis no mercado, tenho certeza de que um atenderá às suas necessidades


5

Aqui está uma solução rápida que funciona no jQuery 1.9+:

a) Obter posição de sinal de intercalação:

function getCaret(el) {
        if (el.prop("selectionStart")) {
            return el.prop("selectionStart");
        } else if (document.selection) {
            el.focus();

            var r = document.selection.createRange();
            if (r == null) {
                return 0;
            }

            var re = el.createTextRange(),
                    rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);

            return rc.text.length;
        }
        return 0;
    };

b) Anexar texto na posição de sinal de intercalação:

function appendAtCaret($target, caret, $value) {
        var value = $target.val();
        if (caret != value.length) {
            var startPos = $target.prop("selectionStart");
            var scrollTop = $target.scrollTop;
            $target.val(value.substring(0, caret) + ' ' + $value + ' ' + value.substring(caret, value.length));
            $target.prop("selectionStart", startPos + $value.length);
            $target.prop("selectionEnd", startPos + $value.length);
            $target.scrollTop = scrollTop;
        } else if (caret == 0)
        {
            $target.val($value + ' ' + value);
        } else {
            $target.val(value + ' ' + $value);
        }
    };

c) Exemplo

$('textarea').each(function() {
  var $this = $(this);
  $this.click(function() {
    //get caret position
    var caret = getCaret($this);

    //append some text
    appendAtCaret($this, caret, 'Some text');
  });
});

3

Funciona bem para mim no Chrome 20.0.11

var startPos = this[0].selectionStart;
var endPos = this[0].selectionEnd;
var scrollTop = this.scrollTop;
this[0].value = this[0].value.substring(0, startPos) + myVal + this[0].value.substring(endPos, this[0].value.length);
this.focus();
this.selectionStart = startPos + myVal.length;
this.selectionEnd = startPos + myVal.length;
this.scrollTop = scrollTop;

1

Se você deseja anexar conteúdo à área de texto sem substituí-lo, tente o abaixo

$('textarea').append('Whatever need to be added');

De acordo com o seu cenário, seria

$('a').click(function() 
{ 
  $('textarea').append($('#area').val()); 
})

0

Eu acho que isso seria melhor

$(function() {
$('#myAnchorId').click(function() { 
    var areaValue = $('#area').val();
    $('#area').val(areaValue + 'Whatever you want to enter');
});
});

0

Outra solução também é descrita aqui , caso alguns dos outros scripts não funcionem no seu caso.


0

Isso é semelhante à resposta dada por @panchicore com um pequeno bug corrigido.

function insertText(element, value) 
{
   var element_dom = document.getElementsByName(element)[0];
   if (document.selection) 
   {
      element_dom.focus();
      sel = document.selection.createRange();
      sel.text = value;
      return;
    } 
   if (element_dom.selectionStart || element_dom.selectionStart == "0") 
   {
     var t_start = element_dom.selectionStart;
     var t_end = element_dom.selectionEnd;
     var val_start = element_dom.value.substring(value, t_start);
     var val_end = element_dom.value.substring(t_end, element_dom.value.length);
     element_dom.value = val_start + value + val_end;
   } 
   else
   {
      element_dom.value += value;
   }
}

0

Solução simples seria: ( Assunção : Você quer o que você digite dentro da caixa de texto para se anexado ao que já está lá na textarea )

No evento onClick da marca <a>, escreva uma função definida pelo usuário, que faz isso:

function textType(){

  var **str1**=$("#textId1").val();

  var **str2**=$("#textId2").val();

  $("#textId1").val(str1+str2);

}

(onde os IDs, textId1 - para o / p textArea textId2 - para i / p textbox ')


0
$.fn.extend({
    insertAtCaret: function(myValue) {
        var elemSelected = window.getSelection();
        if(elemSelected) {
            var startPos = elemSelected.getRangeAt(0).startOffset;
            var endPos = elemSelected.getRangeAt(0).endOffset;
            this.val(this.val().substring(0, startPos)+myValue+this.val().substring(endPos,this.val().length));
        } else {
            this.val(this.val()+ myValue) ;
        }
    }
});

-1

Eu usei isso e funciona bem :)

$("#textarea").html("Put here your content");

Remi


1
Não, não faz. Se você alterar o html da área de texto, verá o conteúdo, mas quando você salva o FORM, ele não funciona, porque o formulário precisa do valor da área de texto, não do HTML interno.
tothemario
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.