web-dev-qa-db-fra.com

Insérer du texte dans textarea avec jQuery

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

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

jqueryformattingtextarea
145
Oliver Stubley

D'après 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'
})

Édition- Pour ajouter au texte, voir ci-dessous

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

J'aime l'extension de la fonction jQuery. Cependant, le this fait référence à l'objet jQuery et non à l'objet DOM. Donc, je l'ai un peu modifié pour le rendre encore meilleur (possibilité de mettre à jour simultanément dans plusieurs zones de texte/zones de texte).

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 à plusieurs endroits à la fois, comme:

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

J'utilise cette fonction dans mon code:

$.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>

Ce n'est pas à 100% le mien, je l'ai googlé quelque part, puis optimisé pour mon application.

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

44
Thinker

Je sais que c’est une vieille question, mais pour ceux qui recherchent cette solution, il convient de noter qu’il ne faut pas utiliser append () pour ajouter du contenu à une zone de texte. La méthode append () cible innerHTML et non la valeur de la zone de texte. Le contenu peut apparaître dans la zone de texte mais il ne sera pas ajouté à la valeur de forme de l'élément.

Comme indiqué ci-dessus en utilisant: 

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

fonctionnera bien.

19
Marcus

celui-ci vous permet "d'injecter" un morceau de texte dans une zone de texte, injecter signifie: ajoute le texte où se trouve le curseur.

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

Et vous pouvez l'utiliser comme ceci:

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

Drôle et ont plus de sens quand nous avons la fonctionnalité "Insérer une balise dans le texte".

fonctionne dans tous les navigateurs.

13
panchicore

Hej Ceci est une version modifiée qui fonctionne bien dans FF @ moins pour moi et insère à la position des 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();
   }
 }
})
12
Babak Bandpay

as-tu essayé:

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

pas sûr de l'auto-éclairage, cependant.

MODIFIER:

À ajouter: 

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

Voici une solution rapide qui fonctionne dans jQuery 1.9+:

a) Obtenir la position de caret:

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) Ajouter du texte à la position du curseur:

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

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

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

Ce que vous demandez devrait être assez simple dans jQuery-

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

Le meilleur moyen de surligner le texte inséré est de l'envelopper dans une étendue avec une classe CSS avec background-color défini sur la couleur de votre choix. Lors de l'insertion suivante, vous pouvez supprimer la classe de toutes les étendues existantes (ou en supprimer les étendues).

Cependant, il existe de nombreux éditeurs WYSIWYG HTML/Rich Text gratuits sur le marché, je suis sûr que l'un d'eux répondra à vos besoins

5
Russ Cam

Cela fonctionne bien pour moi dans 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;
3
Long

Si vous souhaitez ajouter du contenu à la zone de texte sans les remplacer, vous pouvez essayer ce qui suit.

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

Selon votre scénario, ce serait

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

Ceci est similaire à la réponse donnée par @panchicore avec un bug mineur corrigé.

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;
   }
}
0
Dev
$.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) ;
        }
    }
});
0
George SEDRA

Je pense que ce serait mieux

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

J'ai utilisé ça et ça marche bien :)

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

Rémi

0
Remi

Une autre solution est également décrite ici au cas où certains des autres scripts ne fonctionneraient pas dans votre cas.

0
d.popov