Text in Zwischenablage Kopieren

Ist es möglich ein angezeigtes Ergebnis mit einem Symbol-Klick, (das heißt KEIN Button) in die Zwischenablage zu kopieren?

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <style> body { background-color: #f5f5f5; } .contact { background-color: #fff; padding: 15px; max-width: 200px; margin: 30px auto; } .icon { width: 16px; height: 16px; padding: 0; margin: 0; vertical-align: middle; } </style> <label>Kopiere den Text beim drauf klicken</label> <hr> <a class="btn btn-primary btn-email" href="#">oder hier den Link im a innerHTML</a> <hr> <div> <textarea>Tippe ein Text ein den du kopieren willst und klicke dann den Button</textarea><button>Kopiere den Text</button> </div> <hr> <div> <input type="hidden" id="text" value="kopierter Text in hidden Feld"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M17,9H7V7H17M17,13H7V11H17M14,17H7V15H14M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" /></svg> <p>Klicke das Icon um den Text aus den Hiddenfeld zu kopieren</p> </div> <hr> <h5>hier siehst du die texte die gerade in der Zwischenablagew Kopiert wurden</h5> <div id="cop" style="width:80%;margin:0 auto;border:2px solid green;min-height:200px"></div> </div> </div> <script> function copyToClipboard(text, el) { var copyTest = document.queryCommandSupported('copy'); if (copyTest === true) { var copyTextArea = document.createElement("textarea"); copyTextArea.value = text; document.body.appendChild(copyTextArea); copyTextArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'Copied!' : 'Whoops, not copied!'; $('#cop').html(msg+' = Text '+text) } catch (err) { console.log('Oops, unable to copy'); } document.body.removeChild(copyTextArea); } else { window.prompt("Copy to clipboard: Ctrl+C or Command+C, Enter", text); } } $(document).ready(function() { $('a,label').click(function(){ var text=$(this).html(); var el = $(this); copyToClipboard(text, el); }); $('svg').click(function(){ var text=$('#text').val(); var el = $(this); copyToClipboard(text, el); }); $('button').click(function(){ var text=$('textarea').val(); var el = $(this); copyToClipboard(text, el); }); }); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!