Copier <p> dans le presse papier

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
louisrgn
Messages : 2
Enregistré le : 17 oct. 2021, 16:12

Copier <p> dans le presse papier

Message par louisrgn » 17 oct. 2021, 16:15

Bonjour,

Je travaille actuellement sur un projet qui génère du code VBA. Après que l'utilisateur ai renseigné les champs input, il clique sur "Créer" et cela génère un code VBA.

Une fois que celui-ci est fait, j'aimerai faire un fonction copier qui récupère le code généré, pour que l'utilisateur n'est plus qu'à le coller dans l'éditeur Visual Basic for Application.

J'ai essayé les méthodes document.execCommand("copy") et clipboard rien n'y fait :(

Pouvez-vous me dire comment récupérer dans le presse papier le contenu de la balise HTML suivante :

Code : Tout sélectionner

<p id="show_code_macro1"></p>
Sachant que cette balise est alimentée par le contenu issu de la fonction JS suivante :

Code : Tout sélectionner

        function InstertionColonnesMultiples() {
          let Valeur1Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur2Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur3Macro1 = document.getElementById("InputVal2macro1").value;
          if (typeof Valeur1Macro1 !== 'undefined' && Valeur1Macro1 && Valeur3Macro1) {
              document.getElementById("show_code_macro1").innerHTML = 
              '<div class="Pre"><span class="MotClef">Sub </span>' + 'InsertMultipleColumns()'  + '<br/>' 
              + '<span class="MotClef">Dim </span>i <span class="MotClef">As Integer</span>' + '<br/>' 
              + 'Range("' + Valeur1Macro1 + ':' + Valeur2Macro1 + '").Select' + '<br/>'
              + '<span class="MotClef">On Error GoTo </span>Last' + '<br/>'
              + '&nbsp;' + '<span class="MotClef">' + 'For</span> i = 1 <span class="MotClef">To</span> ' + Valeur3Macro1 + '<br/>' 
              + '&nbsp;' + '&nbsp;' + 'Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove</span>' + '<br/>' 
              + '&nbsp;' + '<span class="MotClef">Next</span> i' + '<br/>'
              + 'Last: <span class="MotClef">Exit Sub</span>' + '<br/>'
              + '<span class="MotClef">End Sub</span></div>';
              swal("Tadaaamm", "Votre macro est prête !", "success");
          }
          else{
              swal("Oooups", "Vous avez oublié de saisir une ou plusieurs valeurs", "error");
          };
        }
Le code HTML dans son ensemble :

Code : Tout sélectionner

<!doctype html>

<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Insererdescolonnes</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  </head>

  <body>

      <header>
      </header>

    <main>
      <section id="content">
        <h3>Insérer des colonnes</h3>
        <p>Ce code vous permet de saisir plusieurs colonnes en un seul clic.<br>
            Vous devez simplement renseigné la colonne à partir de laquelle vous souhaitez ajouter d'autres colonnes et indiquer le nombre.</p>
        <label>Ciblez la colonne de départ</label><input type="text" placeholder="A" id="InputVal1macro1"><br>
        <label>Saisissez le nombre de colonnes à insérer</label><input type="text" placeholder="6" id="InputVal2macro1"><br>
        <p class="actions">
          <button onclick="InstertionColonnesMultiples()" class="button special">Créer</button>
          <button onclick="copier()" class="button special icon fa-copy">Copier</button></p>
          <p id="show_code_macro1"></p>
      </section>
    </main>

    <footer>
    </footer>

      <script>
        function InstertionColonnesMultiples() {
          let Valeur1Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur2Macro1 = document.getElementById("InputVal1macro1").value;
          let Valeur3Macro1 = document.getElementById("InputVal2macro1").value;
          if (typeof Valeur1Macro1 !== 'undefined' && Valeur1Macro1 && Valeur3Macro1) {
              document.getElementById("show_code_macro1").innerHTML = 
              '<div class="Pre"><span class="MotClef">Sub </span>' + 'InsertMultipleColumns()'  + '<br/>' 
              + '<span class="MotClef">Dim </span>i <span class="MotClef">As Integer</span>' + '<br/>' 
              + 'Range("' + Valeur1Macro1 + ':' + Valeur2Macro1 + '").Select' + '<br/>'
              + '<span class="MotClef">On Error GoTo </span>Last' + '<br/>'
              + '&nbsp;' + '<span class="MotClef">' + 'For</span> i = 1 <span class="MotClef">To</span> ' + Valeur3Macro1 + '<br/>' 
              + '&nbsp;' + '&nbsp;' + 'Selection.Insert Shift:=xlToRight, CopyOrigin:=xlFormatFromRightorAbove</span>' + '<br/>' 
              + '&nbsp;' + '<span class="MotClef">Next</span> i' + '<br/>'
              + 'Last: <span class="MotClef">Exit Sub</span>' + '<br/>'
              + '<span class="MotClef">End Sub</span></div>';
              swal("Tadaaamm", "Votre macro est prête !", "success");
          }
          else{
              swal("Oooups", "Vous avez oublié de saisir une ou plusieurs valeurs", "error");
          };
        }

        function copier() {
          swal("Copié", " ", "success",{
          buttons: false,
          timer: 1000,
          });
        }

      </script>

  </body>
</html>
Merci par avance du temps que vous prendrez pour contribuer à mon projet ;)

bien cdlt,

louisrgn

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Copier <p> dans le presse papier

Message par webmaster » 18 oct. 2021, 10:12

Bonjour,

Le copy doit être fait après la sélection
Voici la bonne fonction (issue du script de mon livre https://www.toutjavascript.com/livre/sc ... p?url=copy)

Code : Tout sélectionner

        function copier() {
          var elt=document.getElementById("show_code_macro1");
          /* Création de la sélection par programmation de Range */
          var sel=window.getSelection();
          var range=document.createRange();
          range.selectNodeContents(elt);
          sel.removeAllRanges();
          sel.addRange(range);
          /* Copy in the clipboard */
          document.execCommand("copy");
          /* Animation css flash sur l'élément container parent */
          elt.parentNode.className="container flash";
          /* Effacement de la sélection */
          range.collapse();


          swal("Copié", " ", "success",{
          buttons: false,
          timer: 1000,
          });
        }
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

louisrgn
Messages : 2
Enregistré le : 17 oct. 2021, 16:12

Re: Copier <p> dans le presse papier

Message par louisrgn » 18 oct. 2021, 10:31

bonjour Webmaster,

C'est super ca marche très bien ! :D

bonne journée à toi,
cdlt

Répondre