Copy to clipboard with jQuery (from a html tag ) [duplicate]










0
















This question already has an answer here:



  • How to copy text from a div to clipboard

    5 answers



I am currently struggling with copying to clipboard via jQuery.



The code I have works if I use via on-click="Myfunction", but since I need to use it in several places, I would like to apply the function to all elements with a class. This is what I have tried.






$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>








javascript jquery







share|improve this question















marked as duplicate by Mohammad, Heretic Monkey, Foo, cнŝdk, Graham Nov 14 '18 at 3:56


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


















  • It i snot clear what exactly you want

    – brk
    Nov 13 '18 at 14:20











  • Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

    – freefaller
    Nov 13 '18 at 14:21















0
















This question already has an answer here:



  • How to copy text from a div to clipboard

    5 answers



I am currently struggling with copying to clipboard via jQuery.



The code I have works if I use via on-click="Myfunction", but since I need to use it in several places, I would like to apply the function to all elements with a class. This is what I have tried.






$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>








javascript jquery







share|improve this question















marked as duplicate by Mohammad, Heretic Monkey, Foo, cнŝdk, Graham Nov 14 '18 at 3:56


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


















  • It i snot clear what exactly you want

    – brk
    Nov 13 '18 at 14:20











  • Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

    – freefaller
    Nov 13 '18 at 14:21













0












0








0









This question already has an answer here:



  • How to copy text from a div to clipboard

    5 answers



I am currently struggling with copying to clipboard via jQuery.



The code I have works if I use via on-click="Myfunction", but since I need to use it in several places, I would like to apply the function to all elements with a class. This is what I have tried.






$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>








javascript jquery







share|improve this question

















This question already has an answer here:



  • How to copy text from a div to clipboard

    5 answers



I am currently struggling with copying to clipboard via jQuery.



The code I have works if I use via on-click="Myfunction", but since I need to use it in several places, I would like to apply the function to all elements with a class. This is what I have tried.






$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>







This question already has an answer here:



  • How to copy text from a div to clipboard

    5 answers






$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>





$(".btn-clipboard").click(function(e)
 copyToClipboard($(this));
);

function copyToClipboard(element) 
 var $temp = $("<textarea>");
 $("body").append($temp);
 $temp.val($(element).siblings("code").text()).select();
 document.execCommand("copy");
 $temp.remove();
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bd-clipboard">
 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard" >Copy</button>
</div>
<figure>
 <pre>
 <code class="language-html" data-lang="html"><br>
 <span> code example that should be copied</span>
 </code>
 </pre>
</figure>





javascript jquery




javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 13 '18 at 14:28









Josh Mein

21.6k106881




21.6k106881










asked Nov 13 '18 at 14:18









and.richand.rich

1




1




marked as duplicate by Mohammad, Heretic Monkey, Foo, cнŝdk, Graham Nov 14 '18 at 3:56


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Mohammad, Heretic Monkey, Foo, cнŝdk, Graham Nov 14 '18 at 3:56


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • It i snot clear what exactly you want

    – brk
    Nov 13 '18 at 14:20











  • Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

    – freefaller
    Nov 13 '18 at 14:21

















  • It i snot clear what exactly you want

    – brk
    Nov 13 '18 at 14:20











  • Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

    – freefaller
    Nov 13 '18 at 14:21
















It i snot clear what exactly you want

– brk
Nov 13 '18 at 14:20





It i snot clear what exactly you want

– brk
Nov 13 '18 at 14:20













Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

– freefaller
Nov 13 '18 at 14:21





Not sure if it will make any difference, put you're passing in $(this) to a parameter element and then wrapping it up again as $(element)

– freefaller
Nov 13 '18 at 14:21












1 Answer
1






active

oldest

votes


















-1














As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.



Here's a code example:






document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">








share|improve this answer


















  • 1





    syntax error: unexpected token: '{'

    – Jean-Marc Zimmer
    Nov 13 '18 at 14:30


















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









-1














As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.



Here's a code example:






document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">








share|improve this answer


















  • 1





    syntax error: unexpected token: '{'

    – Jean-Marc Zimmer
    Nov 13 '18 at 14:30
















-1














As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.



Here's a code example:






document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">








share|improve this answer


















  • 1





    syntax error: unexpected token: '{'

    – Jean-Marc Zimmer
    Nov 13 '18 at 14:30














-1












-1








-1







As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.



Here's a code example:






document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">








share|improve this answer













As with some other actions in a browser (like opening a new window), the copy to clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.



Here's a code example:






document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">








document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">





document.getElementById("copyButton").addEventListener("click", function() 
 copyToClipboard(document.getElementById("copyTarget"));
);

function copyToClipboard(elem) 
input 
 width: 400px;

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 13 '18 at 14:29









Ilia TapiaIlia Tapia

169




169







  • 1





    syntax error: unexpected token: '{'

    – Jean-Marc Zimmer
    Nov 13 '18 at 14:30













  • 1





    syntax error: unexpected token: '{'

    – Jean-Marc Zimmer
    Nov 13 '18 at 14:30








1




1





syntax error: unexpected token: '{'

– Jean-Marc Zimmer
Nov 13 '18 at 14:30






syntax error: unexpected token: '{'

– Jean-Marc Zimmer
Nov 13 '18 at 14:30






-

Popular posts from this blog

Darth Vader #20

Image
Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Community Top Users Activity Feed User Lists Community Promos Archives News Reviews Videos Podcasts Previews Login / Sign Up All Wiki     Arcs     Characters     Companies     Concepts     Issues     Locations     Movies     People     Teams     Things     Volumes     Series     Episodes Editorial     Videos     Articles     Reviews     Features Community     Users Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Com
Read more

How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

Image
0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a comment  |  0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a commen
Read more

Ondo

Image
Der Titel dieses Artikels ist mehrdeutig. Zu weiteren Bedeutungen siehe Ondo (Begriffsklärung). Ondo Basisdaten Hauptstadt: Akure gegründet: 3. Februar 1976 Gouverneur: Rotimi Akeredolu ISO 3166-2: NG-ON Fläche Fläche: 15.500 km² Rang in Nigeria: 25 Bevölkerung Einwohner: 4.671.700 (2016) Bevölkerungsdichte: 320 Einw./km² (2016) Rang in Nigeria: 18 Lage von Ondo in Nigeria Ondo ist ein Bundesstaat des westafrikanischen Landes Nigeria mit der Hauptstadt Akure, die mit 420.623 Einwohnern (2005) auch die größte Stadt des Bundesstaates ist. Inhaltsverzeichnis 1 Geografie 2 Geschichte 2.1 Liste der Gouverneure und Administratoren 3 Verwaltung 4 Wirtschaft Geografie | Der Bundesstaat liegt im Südwesten des Landes und grenzt im Norden an den Bundesstaat Ekiti, im Nordwesten an den Bundesstaat Osun, im Nordosten an den Bundesstaat Kogi, im Süden an den Atlantik, im Südosten an den Bundesstaat Delta, im Westen an den Bundesstaat Ogun und im Osten an den Bundesstaat Edo. Geschichte | Der
Read more