10597 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Actuellement en train de réaliser un site web dynamique je me retrouve face à 2 petits problèmes. Mon niveau en javascript n'étant pas suffisant je fais appel à vous.
Voici mon code (j'ai enlevé les parties inutiles):
<html><?php
    session_start();
    if($_SESSION['username'] !== ""){ $user = $_SESSION['username'];}
    $s_a_d = isset($_POST['s_a_d']) ? $_POST['s_a_d'] : NULL;
    $s_a_d = nl2br($s_a_d);
?>

<body>
    <div id="nouveauTicket" style="display: inline-block;  margin: auto; float: right; width: 8%;">
        <form method="post" action="principale.php"><input class="bouton_gen_ticket" type="submit" value="+ Nouveau ticket" style="width: 100%%; height: 30px;"></form>
        <button id="bouton" class="bouton_gen_ticket" type="submit" style="width: 100%%; height: 30px;">Copier le ticket</button>
    </div>
    <!-- Création du bouton pour faire un nouveau ticket -->
    <div id="nouveauTicket" style="display: inline-block;  margin: auto; float: right; width: 8%;">
        <form method="post" action="principale.php">
            <input class="bouton_gen_ticket" type="submit" value="+ Nouveau ticket" 
               style="width: 100%%; height: 30px;">
        </form>
    </div>

    <!-- Affichage du ticket -->
	<div id="content" style="display: inline-block; border-style: solid; border-color: black; border-width: 2px; width: 30%; margin: auto; float: left; margin-left: 35%">
        <?php
        echo "&nbsp;<a style='font-size:15px; font-weight: bold'>Autre demande de service</a>
        <br/><br/>&nbsp;• Description de la demande : <br/>" . $s_a_d . "<br/><br/>";
        ?>
    </div>
</body>
</html>






Et voici ma fonction js :
<script>
    var bouton = document.getElementById('bouton');

    bouton.addEventListener('click', function() {
        var entire_text = "";
        var text;
        for (let i = 0; i < 100; i++) {
            text = document.getElementById("content").children[i];
            if (text == undefined) break;
            if (text.tagName == "BR") {entire_text += '\n'; continue;}
            console.log(text);
            entire_text += String(text.innerHTML);
        }
        console.log(entire_text);

        navigator.clipboard.writeText(entire_text).then(function() {
            console.log('success')
        }, function() {
            console.log('failed')
        });

        return false;
    });
</script>



Mon objectif et de créer un bouton qui puisse copier le texte qui se trouve dans le <textarea> mais j'ai 2 difficultés : 1) Je n'arrive pas à copier les variables PHP
2) J'aimerais garder le format d'écriture (mais comme cela copie dans le
presse-papier cela enlève tout Smiley ohwell )

Si vous avez des idées je vous en serais très reconnaissant.
Merci beaucoup et bonne journée Smiley smile
Modifié par Gwaka (01 Jul 2019 - 12:15)
Hello

pour dupliquer du contenu, tu peux utiliser en jquery la méthode clone()
Je te laisse explorer l'api Smiley cligne
Modifié par Pedrothelion (05 Jul 2019 - 09:38)
Attention, session_start doit être appelé avant que quoi que ce soit ne soit transmis au navigateur, donc ton fichier devrait commencer ainsi (et non l'inverse):

<?php
    session_start();
    // autres commandes
?>
<html>


Concernant ta question, le contenu du presse papier est associé a un type mime, ce qui permet aux applications de réagir différemment au collage selon le contenu (image, texte brut, texte mis en forme, etc.)
Utiliser writeText force le type à être texte brut. Il faudrait passer par la méthode write de Clipboard, mais seul Firefox l'implémente à l'heure actuelle.

Pour le support dans Chrome, il faut passer par la vieille méthode, sélectionner les éléments, déclencher la copie avec execCommand, et éventuellement intercepter l'évènement pour changer le type.