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 ya en textarea, quiero agregar texto nuevo a textarea.

Por 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 agregar al texto, mira a continuación

 $('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 he modificado un poco para que sea aún mejor (se puede actualizar en varios 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 realmente bien. Puede insertar en varios lugares a la vez, como:

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

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} 
     

Sé que esta es una vieja pregunta, 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 () apunta a innerHTML no al valor de textarea. El contenido puede aparecer en el área de texto pero no se agregará al valor del formulario del elemento.

Como se indicó anteriormente usando:

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

funcionará bien

éste le permite “inyectar” una pieza de 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í:

 Say hello world to text 

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í y se inserta en la posición de caricias

  $.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 acerca de la autoalineación.

EDITAR :

Para anexar:

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

Lo que pide 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-color en el color que prefiera. En el siguiente inserto, 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 se adaptará a sus necesidades.

  • TinyMCE – Editor WYSIWYG de JavaScript
  • Rich Text Editor – Biblioteca YUI
  • 10 editores de texto enriquecido de jQuery y non-jQuery JavaScript

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

a) Obtener la posición de intercalación:

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

Funciona bien para mí 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 intentarlo a continuación

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

De acuerdo con su escenario, sería

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

Lo usé y funciona bien 🙂

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

Remi

Creo que esto sería mejor

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

Otra solución se describe también aquí 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 anexe a lo que ya está allí en el área de texto )

En el evento onClick de la etiqueta , 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 ids, 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) ; } } }); 
    Intereting Posts