contenu de divs dans textarea

Je voudrais transférer le texte de tous div avec la classe spécifique à la zone de texte sur la même page.contenu de divs dans textarea

Comment puis-je faire cela?

par exemple:

< div class="test1" > Example1 < /div > 
< div class="test2" > Example2 < /div > 
< div class="test1" > Example3 < /div > 
< div class="test3" > Example4 < /div >

Je voudrais transférer le contenu de la classe div test1 et dans la zone de texte doit montrer « Example1 » et « Example3 ».

Toute aide, s'il vous plaît! javascript ou php

john

Source

2009-11-02 John

Cela serait fait assez facilement avec jQuery:

var newTextVal = ""; 
$('.text1').each(
    function() 
    { 
     newTextVal += $(this).text(); 
    } 
); 
$('textarea').val(newTextVal);

Cette boucle au-dessus de volonté à travers chaque élément avec la classe « text1 » et d'ajouter sa valeur de nœud de texte au texte dans la zone de texte.

Source

2009-11-02 23:39:37

Cela semble pouvoir être amélioré. Je suggère de stocker la valeur dans une chaîne ou un tableau de chaînes et de définir la valeur textarea uniquement à la fin plutôt que de la réaffecter chaque fois autour de la boucle. –

Tout à fait d'accord. J'ai mis à jour pour convenir :) –

Je suggère d'utiliser l'attribut "id" pour les divs au lieu de class. Fondamentalement, vous auriez besoin d'écrire une fonction JavaScript qui utilise GetElementById() ou GetElementByObject().

Ensuite, définissez un bouton qui appelle cette fonction en lui passant l'id de la div et l'id de la zone de texte. Enfin, définissez la valeur de l'objet textarea sur la valeur de l'objet div.

EDIT: Voici la fonction.

<script type="text/javascript"> 
function copyValues(idFrom, idTo) { 
    var objFrom = document.getElementById(idFrom); 
    var objTo = document.getElementById(idTo); 

    objTo.value = objFrom.value 
} 
</script>

Au cas où vous voulez il a déclenché:

copyValues("div1", "textarea1"); 
copyValues("div2", "textarea2"); 
copyValues("div3", "textarea3");

Source

2009-11-02 23:42:51 sohum

Cela signifierait un nouvel appel à copyValues pour chaque div sur la page que vous vouliez faire avec. Cela pourrait dégénérer rapidement. –

Si vous cherchez javascript pur cela fonctionnerait - bien que des choses comme ça sont très faciles à manipuler dans des cadres comme jQuery:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript"> 

     function CopyDivsToTextArea() 
     { 
      var divs = document.getElementsByTagName("div"); 
      var textToTransfer = ""; 
      var pattern = new RegExp("test1"); 

      for(var i=0;i<divs.length;i++) 
      { 
      if(pattern.test(divs[i].className)) 
       { 
        textToTransfer += (divs[i].innerText || divs[i].textContent); 
       } 
      } 
     document.getElementById("ta").value = textToTransfer; 
     } 

    </script> 
</head> 
<body> 
<div class="test1" > Example1 </div > 
<div class="test2" > Example2 </div > 
<div class="test1" > Example3 </div > 
<div class="test3" > Example4 </div > 
<br /> 
<textarea id="ta" cols="50" rows="20"></textarea> 
<br /> 
<input type="button" id="btn" value="Button" onclick="CopyDivsToTextArea();" /> 
</body> 
</html>

Source

2009-11-02 23:49:10 brendan

J'aime le manque de confiance dans une bibliothèque, mais il y a une fragilité avec la ligne 'if (divs [i] .className ==" test1 ")' line: les éléments peuvent avoir plusieurs classes CSS, donc vous devriez tester cela avec un expression régulière ou équivalente au lieu de la simple comparaison d'égalité. En outre, innerHTML est probablement le mauvais choix, car vous pourriez vous retrouver avec des balises HTML indésirables dans la zone de texte. Vous pouvez utiliser 'innerText' /' textContent' à la place: 'textToTransfer + = (divs [i] .innerText || divs [i] .textContent);'. 'innerText' et' textContent' ne sont pas tout à fait équivalents mais cela peut suffire. –

bons points Tim, mis à jour l'exemple - juste quelque chose que j'ai jeté ensemble, pas 100% approuvé pour tous les scénarios. Merci! – brendan

+1 pour l'élégance et aucune exigence de bibliothèque :) –

Répondre

Questions connexes