Insertar texto en textarea con jQuery

Me pregunto cómo puedo insertar texto en un área de texto usando jquery, al hacer clic en una etiqueta de anclaje.

No quiero reemplazar el texto que ya está en textarea, quiero agregar texto nuevo a textarea.

De lo que tienes en los comentarios de Jason intenta:

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

Editar- Para adjuntar al texto mira abajo

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

Me gusta la extensión de la función jQuery. Sin embargo, esto se refiere al objeto jQuery, no al objeto DOM. Así que lo modifiqué un poco para hacerlo aún mejor (se puede actualizar en múltiples cuadros de texto / áreas de texto a la 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();
    }
  });
}
});

Esto funciona muy bien Puede insertar en varios lugares a la vez, como:

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

Yo uso esta función en mi 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>

No es 100% mío, lo busqué en Google en algún lugar y luego ajusté mi aplicación.

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

Sé que esta es una pregunta antigua, pero para las personas que buscan esta solución, vale la pena señalar que no debe usar append () para agregar contenido a un área de texto. el método append () se dirige a innerHTML, no al valor del área de texto. El contenido puede aparecer en el área de texto, pero no se agregará al valor del formulario del elemento.

Como se señaló anteriormente usando:

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

Funcionará bien.

este le permite "inyectar" un texto en el cuadro de texto, inyectar significa: agrega el texto donde está el 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;
 }
}

Y puedes usarlo así:

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

Es divertido y tiene más sentido cuando tenemos la funcionalidad "Insertar etiqueta en el texto".

Funciona en todos los navegadores.

Hej, esta es una versión modificada que funciona bien en FF @least para mí e inserta en la posición de cuidado

  $.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();
   }
 }
})

has probado:

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

Sin embargo, no estoy seguro sobre la iluminación automática.

EDITAR :

Para anexar:

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

Lo que pides debe ser razonablemente sencillo en jQuery-

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

La mejor manera en que puedo pensar en resaltar el texto insertado es envolviéndolo en un lapso con una clase CSS con background-colorel color que elija. En la siguiente inserción, puede eliminar la clase de cualquier tramo existente (o quitar los tramos).

Sin embargo, hay muchos editores WYSIWYG HTML / Rich Text gratuitos disponibles en el mercado, estoy seguro de que uno satisfará sus necesidades

• TinyMCE - editor de JavaScript WYSIWYG
• Editor de texto enriquecido - Biblioteca YUI
• 10 editores de texto enriquecido JavaScript jQuery y no jQuery

Aquí hay una solución rápida que funciona en jQuery 1.9+:

a) Obtener posición de cuidado:

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) Agregar texto en posición de intercalación:

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) Ejemplo

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

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

Me funciona bien en 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;

Si desea agregar contenido al área de texto sin reemplazarlos, puede probar lo siguiente

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

Según su escenario sería

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

Creo que esto seria mejor

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

Aquí también se describe otra solución en caso de que algunos de los otros scripts no funcionen en su caso.

Esto es similar a la respuesta dada por @panchicore con un error menor corregido.

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;
   }
}

La solución simple sería: ( Suposición : desea que lo que escriba dentro del cuadro de texto se agregue a lo que ya existe en el área de texto )

En el evento onClick de la etiqueta <a>, escriba una función definida por el usuario, que hace esto:

function textType(){

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

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

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

}

(donde los identificadores, textId1 - para o / p textArea textId2 -for i / p textbox ')

$.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) ;
        }
    }
});

Lo usé y funciona bien :)

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

Remi