Insérer du texte dans le textarea avec jQuery

Question

Je me demande comment je peux insérer du texte dans une zone de texte à l'aide de jquery, sur le fait de cliquer sur une balise d'ancrage.

Je ne veux pas remplacer le texte déjà dans le textarea, je veux ajouter un nouveau texte à textarea.

Answer 1

J'aime la fonction jQuery extension. Toutefois, la présente fait référence à l'objet jQuery pas l'objet DOM. Donc j'ai modifié un peu pour le rendre encore mieux (mise à jour en plusieurs zones de texte / textareas à la fois).

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

Cela fonctionne vraiment bien. Vous pouvez insérer dans plusieurs endroits à la fois, comme:

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

Answer 2

À partir de ce que vous avez dans les commentaires de Jason, essayez:

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

Modifier- Pour ajouter du texte, regardez ci-dessous

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

Answer 3

J'utilise cette fonction dans mon code:

$.fn.extend({
 insertAtCaret: function(mavaleur) {
 if (document.la sélection) {
c'.focus();
 sel = document.sélection.createRange();
 sel.texte = mavaleur;
c'.focus();
}
 else if (this.selectionStart || ce.selectionStart == '0') {
 var startPos = ce.selectionStart;
 var endPos = ce.selectionEnd;
 var scrollTop = ce.scrollTop;
 c'.valeur = ce.de la valeur.substring(0, startPos)+mavaleur+.de la valeur.substring(endPos,cette.de la valeur.la longueur);
c'.focus();
 c'.selectionStart = startPos + mavaleur.longueur;
 c'.selectionEnd = startPos + mavaleur.longueur;
 c'.scrollTop = scrollTop;
 } else {
 c'.valeur += mavaleur;
c'.focus();
}
}
})

Il n'est pas 100% de la mine, je l'ai googlé un endroit et à l'écoute pour la mine d'application.

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

Answer 4

Je sais que c'est une vieille question, mais pour les personnes à la recherche de cette solution, il est intéressant de noter que vous ne devez pas utiliser append() pour ajouter le contenu d'un textarea. le append() la méthode des cibles innerHTML pas de la valeur du textarea. Le contenu peut apparaître dans le textarea, mais il ne sera pas ajouté à l'élément de la forme valeur.

Comme indiqué ci-dessus à l'aide de:

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

fonctionnera très bien.

Answer 5

Hej ceci est une version modifiée qui fonctionne bien en FF @moins pour moi et insère à la position carets

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