web-dev-qa-db-fra.com

Copiez le texte dans le presse-papiers de div avec javascript

J'essaie de copier le texte du div suivant dans le presse-papiers avec Javascript. Voici mon code actuel:

HTML:

<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>

Javascript:

$(".btnFileCopy").click(function () {
    var copyText = document.getElementsByClassName("hl7MsgBox");
    copyText.select();
    document.execCommand("copy");
});

Je m'attends à obtenir la nouvelle sortie lorsque je la colle dans le notepad:

1
2
3
4
5
6
7
8

Cependant, pour une raison quelconque, cela ne fonctionne pas et envoie le message d'erreur suivant:

TypeError non capturé: copyText.select n'est pas une fonction ...

Quelqu'un sait-il comment résoudre ce problème?

javascriptclipboard
3
Jin Yong

Tout d'abord, quelques références:

La méthode getElementsByClassName() de l'interface Document retourne un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler getElementsByClassName() sur n'importe quel élément; il ne renverra que les éléments qui sont des descendants de l'élément racine spécifié avec les noms de classe donnés.

Ainsi, dans votre cas particulier, la variable copyText contiendra un tableau d'éléments (ceux qui ont la classe hl7MsgBox Sous l'élément document). Maintenant, parce que dans votre cas, il n'y a qu'un seul élément avec cette classe, vous pouvez y accéder en utilisant copyText[0] Et obtenir tout le texte encapsulé avec copyText[0].textContent. En résumé, vous pouvez faire quelque chose comme next pour obtenir le texte à copier:

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;

Une autre possibilité consiste à utiliser la méthode querySelector () :

La méthode Document querySelector() renvoie le premier élément dans le document qui correspond au sélecteur ou groupe de sélecteurs spécifié. Si aucune correspondance n'est trouvée, null est renvoyé.

Avec la méthode querySelector() vous pouvez simplement faire:

var copyText = document.querySelector(".hl7MsgBox").textContent;

Enfin, nous pouvons créer une méthode générale appelée copyToClipBoard() dont le seul travail est de copier le string reçu dans le presse-papiers et de réorganiser le code avec pur Javascript comme ceci:

const copyToClipBoard = (str) =>
{
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

document.querySelector(".btnCopy").addEventListener("click", function()
{
    var copyText = document.querySelector(".hl7MsgBox").textContent;

    // Or...
    //var elems = document.getElementsByClassName("hl7MsgBox");
    //var copyText = elems[0].textContent;

    copyToClipBoard(copyText);
});
<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>
<button class="btnCopy">Copy To Clipboard</button>
<br>
<textarea rows=8 cols=50 placeholder="Paste text here..."></textarea>
8
Shidersz

Obtenez simplement le texte de la DIV et passez à cette fonction.

function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}   

copyToClipboard('hello'); //hello
0
Diego Fortes