Insérer du texte dans textarea avec jQuery

Je me demande comment insérer du texte dans une zone de texte en utilisant jquery, en cliquant sur une balise d’ancrage.

Je ne veux pas remplacer le texte déjà dans textarea, je veux append 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' }) 

Edit- Pour append 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, ceci fait référence à l’object jQuery et non à l’object 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.subssortingng(0, startPos)+myValue+this.value.subssortingng(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'); 

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.subssortingng(0, startPos) + myValue + this.value.subssortingng(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} 
     

Je sais que c’est une vieille question, mais pour ceux qui recherchent cette solution, notez que vous ne devez pas utiliser append () pour append du contenu à une zone de texte. La méthode append () cible la propriété 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 du formulaire de l’élément.

Comme indiqué ci-dessus en utilisant:

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

va bien fonctionner.

celui-ci vous permet “d’injecter” un morceau de texte dans textbox, injecter signifie: ajoute le texte là 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.subssortingng(0,t_start); var val_end=elemento_dom.value.subssortingng(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:

 Say hello world to text 

Drôle et avoir plus de sens lorsque nous avons la fonctionnalité “Insérer un tag 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.subssortingng(0, startPos)+myValue+obj.value.subssortingng(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 l’auto-éclairage, cependant.

EDIT :

À append:

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

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

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

La meilleure façon de mettre en évidence le texte inséré est de l’encapsuler dans un intervalle avec une classe CSS avec la couleur de background-color définie sur la couleur de votre choix. Dans l’insertion suivante, vous pouvez supprimer la classe de toutes les étendues existantes (ou retirer les étendues).

Cependant, il existe de nombreux éditeurs WYSIWYG HTML / Rich Text gratuits disponibles sur le marché, je suis sûr que chacun répondra à vos besoins

  • TinyMCE – éditeur JavaScript WYSIWYG
  • Editeur de texte enrichi – Bibliothèque YUI
  • 10 éditeurs de texte enrichi jQuery et non jQuery JavaScript

Voici une solution rapide qui fonctionne dans jQuery 1.9+:

a) Obtenez la position du 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 caret:

 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.subssortingng(0, caret) + ' ' + $value + ' ' + value.subssortingng(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.subssortingng(0, startPos) + myVal + this[0].value.subssortingng(endPos, this[0].value.length); this.focus(); this.selectionStart = startPos + myVal.length; this.selectionEnd = startPos + myVal.length; this.scrollTop = scrollTop; 

Si vous souhaitez append du contenu à la zone de texte sans les remplacer, vous pouvez essayer le contenu ci-dessous.

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

Selon votre scénario, ce serait

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

J’ai utilisé ça et ça marche très bien 🙂

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

Rémi

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.subssortingng(value, t_start); var val_end = element_dom.value.subssortingng(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 existe déjà dans la zone de texte )

Dans l’événement onClick de la balise , écrivez une fonction définie par l’utilisateur:

 function textType(){ var **str1**=$("#textId1").val(); var **str2**=$("#textId2").val(); $("#textId1").val(str1+str2); } 

(où les identifiants, textId1 – for 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().subssortingng(0, startPos)+myValue+this.val().subssortingng(endPos,this.val().length)); } else { this.val(this.val()+ myValue) ; } } });