Insertar texto en textarea con jQuery

151

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.

Oliver Stubley
fuente
1
Si esta es la solución, preferiría construirlo en mí mismo. Es para un blog personal que estoy haciendo para un amigo, así que cualquier cosa que se ajuste a esto.
Oliver Stubley 03 de
entonces desea seleccionar un texto, y cualquiera que esté seleccionado, use jquery para llenar un área de texto, de ser así, ¿de dónde viene este texto, ingresado manualmente o desde una etiqueta especial?
TStamper
TStamper, quiero poder hacer clic en un botón y, según lo que se haga clic, insertar texto en un área de texto.
Oliver Stubley 03 de
entonces, si hace clic en un botón con la etiqueta "negrita", ¿desea negrita en el área de texto?
TStamper
No texto en negrita, sino etiquetas en negrita (probablemente personalizadas en lugar de html)
Oliver Stubley

Respuestas:

125

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'); 
})
TStamper
fuente
revise mi respuesta para una manera mucho más fácil de agregar texto
Jason
8
@ Jason: lo siento, no es cierto, agregar espera datos html que comiencen con un elemento html ej: <p
TStamper
¿Qué tal si el resultado proviene de una página PHP y es manejado por jQuery? (entre datos se transmiten usando Json)
Abu Rayane
186

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');
Aniebiet Udoh
fuente
3
Hay un final}) en la respuesta, así que al principio pensé que la solución no funcionaba, pero después de solucionarlo, funciona muy bien en IE7 y FF3.5. Puede insertar un fragmento de texto a mano para un elemento TEXTAREA. ¡Gracias!
Philippe
1
Esto también funciona en Chrome. gracias por ahorrarme algo de tiempo :) y gracias a @Thinker por el código original.
Veli Gebrev
Vine aquí desde una búsqueda en Google ... Sé que su respuesta tiene un año, pero muchas gracias por esto. Funciona de maravilla
Mike Turley
66
¿Está seldestinado a ser global?
qwertymk
1
Para cualquiera que quiera la versión de coffeescript
zachaysan
47

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');

Pensador
fuente
¿Esto resalta el texto insertado también?
Oliver Stubley
2
Pero esa solución no funcionará cuando el usuario mueva el cursor hacia atrás :) De todos modos, no importa.
Pensador
3
usa 'this' como un conjunto envuelto y un elemento. hmmm ... acabo de probar y no funciona sin ediciones
Scott Evernden
44
No pude hacer que este código funcione tampoco. Estoy usando jQuery. Intenté un área de texto y un campo de texto. Creo que this.value, por ejemplo, debería ser this.val (), etc.
Nick
1
Sí, en IE siguió insertándose en la parte superior del DOM y en Fox no hizo nada. Usando la última
versión de
19

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.

Marcus
fuente
13

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.

panchicore
fuente
55
@temoto: ¿voto negativo para nombres de variables que no están en inglés? Todavía es completamente legible como está. Se supone que el botón de voto negativo se usa si una respuesta no es útil, que no es el caso aquí. Por cierto, también le cuesta un poco de reputación cuando vota abajo.
Josh M.
Tomó un tiempo entender el código español. y hay un error en este código. Se estaba insertando siempre hacia el inicio del cuadro de texto en lugar de hacia el final. Por ejemplo: si el texto es: Estimado usuario y al hacer clic se estaba insertando antes de querido en lugar de después del usuario de texto.
Dev
@JoshM. La cuestión es que este es un duplicado de la respuesta más antigua y más completa escrita por Thinker aquí ... Sacó algunas de las .focus()invocaciones y las actualizaciones de selectionStarty selectionEnddespués de la modificación. Las variables en español pueden haber sido utilizadas para justificar otra respuesta ...
CPHPython
12

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();
   }
 }
})
Babak Bandpay
fuente
10

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");
});
Jason
fuente
Gracias, lo intentaré, soy nuevo en jQuery, así que no conozco todas las funciones fáciles de usar.
Oliver Stubley 03 de
Soy relativamente nuevo también. es divertido y súper fácil una vez que te acostumbras. Mira esto para más referencia: docs.jquery.com/Main_Page
Jason
55
Como señala Marcus a continuación, append()no funciona en el valor de a textarea. El append()método apunta al innerHTML, no al valor del área de texto.
Turadg
6

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

Russ Cam
fuente
5

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');
  });
});
Avram Cosmin
fuente
3

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;
Largo
fuente
1

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()); 
})
Techie
fuente
0

Creo que esto seria mejor

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

fuente
0

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

d.popov
fuente
0

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;
   }
}
Dev
fuente
0

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

SidTechs1
fuente
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) ;
        }
    }
});
George SEDRA
fuente
-1

Lo usé y funciona bien :)

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

Remi

Remi
fuente
1
No, no lo hace. Si cambia el html del área de texto, verá el contenido allí, pero cuando guarde el FORMULARIO no funciona, porque el formulario necesita el valor del área de texto, no el HTML interno.
tothemario