basti1012.bplaced.net

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

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>