2017-08-08 4 views
0

Je souhaite pouvoir placer du texte dans une zone de texte et le copier dans le Presse-papiers, sans afficher la zone de texte.Copier du texte à partir d'un contrôle masqué à l'aide de JavaScript

Pour copier le texte dans le presse-papiers, je crée un bouton avec

onclick = "document.getElementById('txtData').select(); document.execCommand('copy');" 

et cela fonctionne très bien.

Cependant, si j'essaie de cacher la zone de texte en utilisant soit

strStyle = 'display:none;' 

strStyle = 'visibility:hidden;' 

selon

If I want my textarea to be hidden, how do I do it?

alors la copie ne fonctionne plus. La zone de texte est cachée dans les deux cas, mais j'ai vérifié la source HTML et le texte que je veux est toujours là - ce n'est pas comme cacher la zone de texte signifie que son contenu n'est pas réellement disponible.

Si un exemple complet est approprié, voici que je pris de http://www.jstips.co/en/javascript/copy-to-clipboard/

<head> 
<script type='text/javascript'> 
function c2cb() { 
document.getElementById("txtInvoice").select(); 
document.execCommand('copy'); 
} 
</script> 
</head> 
<body ><form id="frmAdminConsole" name="frmAdminConsole" METHOD="POST"> 

<textarea id='txtInvoice' cols='80' style = 'visibility:hidden;'> 



     46 


JOHN SMITH 
GAEL SCOIL NA BFHAL 
34 A IVEAGH CRESENT 
BELFAST 
BT12 6AW 



Bubble Ball Football [2017-02-03 09:00]  20 190.00 
Nerf Wars [2017-02-05 10:00] 14 190.00 
TeamTrek [2017-02-06 12:00]  20 0.00</textarea> 

<input type="button" value="Copy!" onclick="c2cb()"> 

Cela ne fonctionne pas jusqu'à ce que je supprimer "style =" visibility: hidden;".

J'avais ce que je pensais être un oh! moment et dit "je devrais utiliser un contrôle caché", mais cela ne fonctionne pas non plus.

Je me contenterais d'un moyen de cacher la textarea en furtif (faites-en la même couleur que l'arrière-plan ou quelque chose).

+0

Si le texte ne sont visibles comment l'utilisateur final y écrire et ce qui est le résultat attendu de l'opération de copie à partir de là. à la place, vous pouvez également utiliser '' – Deepak

+0

juste une suggestion. vous pouvez vérifier https://clipboardjs.com/ – Atiq

+0

Deepak - l'utilisateur final n'écrit pas là, je suis. Je dois insérer du texte dans le presse-papiers de l'utilisateur final – DJDave

Répondre

2

Utilisez style = 'display: block; largeur: 0; hauteur: 0; opacité: 0; ' au lieu de la visibilité

<head> 
 
<script type='text/javascript'> 
 
function c2cb() { 
 
document.getElementById("txtInvoice").select(); 
 
document.execCommand('copy'); 
 
} 
 
</script> 
 
</head> 
 
<body ><form id="frmAdminConsole" name="frmAdminConsole" METHOD="POST"> 
 

 
<textarea id='txtInvoice' cols='80' style='display:block; width:0; height:0; opacity: 0;'> 
 

 

 

 
     46 
 

 

 
JOHN SMITH 
 
GAEL SCOIL NA BFHAL 
 
34 A IVEAGH CRESENT 
 
BELFAST 
 
BT12 6AW 
 

 

 

 
Bubble Ball Football [2017-02-03 09:00]  20 190.00 
 
Nerf Wars [2017-02-05 10:00] 14 190.00 
 
TeamTrek [2017-02-06 12:00]  20 0.00</textarea> 
 

 
<input type="button" value="Copy!" onclick="c2cb()">

+0

Votre suggestion a-t-elle fonctionné pour vous? Comme je l'ai dit dans mon message, cela n'a pas fonctionné pour moi, et je viens de réessayer dans FF, Chrome et IE – DJDave

+0

son ne fonctionne pas. – Atiq

+0

Utilisation de style = 'display: block; largeur: 0; hauteur: 0; opacité: 0; ' semble fonctionner sur Chrome et IE – kastriotcunaku