Insérer du texte dans une zone de texte avec jQuery

Je me demande comment 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.

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

Modifier - Pour ajouter au texte, regardez ci-dessous

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

J'aime l'extension de la fonction jQuery. Cependant, cela fait référence à l'objet jQuery et non à l'objet DOM. Je l'ai donc modifié un peu pour le rendre encore meilleur (peut être mis à jour dans plusieurs zones de texte / zones de texte à 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 à plusieurs endroits à la fois, comme:

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

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 recherché quelque part sur Google, puis je l'ai réglé pour mon application.

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

Je sais que c'est une vieille question, mais pour les personnes qui recherchent cette solution, il convient de noter que vous ne devez 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 très bien.

celui-ci vous permet "d'injecter" un morceau de texte dans la zone de texte, injecter signifie: ajoute le texte à l'endroit 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 avoir plus de sens lorsque nous avons la fonctionnalité "Insérer une balise dans le texte".

fonctionne dans tous les navigateurs.

Hej c'est une version modifiée qui fonctionne bien dans FF @least 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();
   }
 }
})

as-tu essayé:

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

pas sûr de la mise en évidence automatique, cependant.

MODIFIER :

À ajouter:

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

Ce que vous demandez doit être raisonnablement simple dans jQuery-

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

La meilleure façon dont je peux penser à mettre en évidence le texte inséré est de l'envelopper dans une plage avec une classe CSS avec background-colorla couleur de votre choix. Lors de l'insertion suivante, vous pouvez supprimer la classe de toutes les travées existantes (ou supprimer les travées).

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

• TinyMCE - Éditeur JavaScript WYSIWYG
• Éditeur de texte enrichi - Bibliothèque YUI
• 10 éditeurs de texte riche JavaScript jQuery et non jQuery

Voici une solution rapide qui fonctionne dans jQuery 1.9+:

a) Obtenez la position du curseur:

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

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;

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

Je pense que ce serait mieux

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

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

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

Une solution simple serait: ( Hypothèse : vous voulez que tout ce que vous tapez dans la zone de texte soit ajouté à ce qui est déjà là dans la zone de texte )

Dans l' événement onClick de la balise <a> , écrivez une fonction définie par l'utilisateur, ce qui fait ceci:

function textType(){

  var **str1**=$("#textId1").val();

  var **str2**=$("#textId2").val();

  $("#textId1").val(str1+str2);

}

(où les ids, textId1 - pour o / p textArea textId2 -pour 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) ;
        }
    }
});

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

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

Remi