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="/js_webseite/jquery.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>
<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>