JQuery. N'ajoute pas à textarea après l'édition du texte

Prenez la page suivante:

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/> </head> <body> <div class="hashtag">#one</div> <div class="hashtag">#two</div> <form accept-charset="UTF-8" action="/home/index" method="post"> <textarea id="text-box"/> <input type="submit" value ="ok" id="go" /> </form> <script type="text/javascript"> $(document).ready(function(){ $(".hashtag").click(function(){ var txt = $.trim($(this).text()); $("#text-box").append(txt); }); }); </script> </body> </html>

Le comportement que je m'attends, et que je veux atteindre, c'est que lorsque je clique sur l'un des divs avec le hashtag classe, leur contenu ("#one" et "# deux" respectivement) serait ajouté à la fin du texte dans la zone de texte text-box .

Cela se produit lorsque je clique sur les étiquettes hash juste après la chargement de la page. Cependant, lorsque je commence aussi à modifier manuellement le texte dans la text-box , puis revenir en cliquant sur l'un des hashtags qu'ils n'appliquent pas sur Firefox. Sur Chrome, la chose la plus bizarre se produit: tout le texte que je tape manuellement est remplacé par le nouveau hashtag et disparaît.

Je fais probablement quelque chose de très mal ici, alors j'apprécierais que quelqu'un puisse signaler mon erreur ici et comment réparer cela. Merci.

2 choses.

Tout d'abord, <textarea/> n'est pas une étiquette valide. <textarea> balises <textarea> doivent être entièrement fermées avec une balise de fermeture complète </textarea> .

Deuxièmement, $(textarea).append(txt) ne fonctionne pas comme vous le pensez. Lorsqu'une page est chargée, les nœuds de texte dans la zone de texte sont définis comme étant la valeur de ce champ de formulaire. Ensuite, les nœuds de texte et la valeur peuvent être déconnectés. Lorsque vous entrez dans le champ, la valeur change, mais les noeuds de texte à l'intérieur de DOM ne le font pas. Ensuite, vous modifiez les nœuds de texte avec l'append () et le navigateur efface la valeur car il sait que les nœuds de texte à l'intérieur de la balise ont changé.

Vous souhaitez donc définir la valeur, vous ne souhaitez pas ajouter. Utilisez la méthode val () de jQuery pour cela.

 $(document).ready(function(){ $(".hashtag").click(function(){ var txt = $.trim($(this).text()); var box = $("#text-box"); box.val(box.val() + txt); }); });

Exemple de travail: http://jsfiddle.net/Hhptn/

Utilisez la fonction val () 🙂

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> </head> <body> <div class="hashtag">#one</div> <div class="hashtag">#two</div> <form accept-charset="UTF-8" action="/home/index" method="post"> <textarea id="text-box"></textarea> <input type="submit" value ="ok" id="go" /> </form> <script type="text/javascript"> $(document).ready(function(){ $(".hashtag").click(function(){ var txt = $.trim($(this).text()); $("#text-box").val($("#text-box").val() + txt); }); }); </script> </body> </html>

Est ce que ça aide?

La raison de l'ajout ne semble pas fonctionner, c'est parce que la valeur de la zone de texte est constituée du noeud enfant, mais en le traitant comme plusieurs noeuds séparés, l'écran ne sera pas mis à jour, selon mon Firebug. Firebug me montre les nœuds enfants mis à jour, mais PAS le texte que j'ai tapé manuellement dans la zone de texte, alors que l'écran me montre le texte saisi manuellement mais pas les nouveaux noeuds.

Vous pouvez référencer par valeur de la zone de texte.

 $(document).ready(function () { window.document.getElementById("ELEMENT_ID").value = "VALUE"; }); function GetValueAfterChange() { var data = document.getElementById("ELEMENT_ID").value; }

Fonctionne bien.

 if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();