Insertar texto en textarea con jQuery



Answers

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

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.




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 <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 ids, textId1 - para o / p textArea textId2 -for i / p textbox ')




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;



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.




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



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




Lo usé y funciona bien :)

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

Remi




Otra solución se describe también here en caso de que algunos de los otros scripts no funcionen en su caso.




Related