imgをクリップボードにコピーして貼り付けます。

Question

私の目標は、私のウェブサイトのwhatsappのようなメッセンジャーアプリに似た機能を持たせることです。スマイリーをクリックすると、<img>となり、この<img>の値はクリップボードに保存され、おそらく<input>フィールドにコピーされることもあります。

助けていただければ幸いです。私はこれをどうやって行うのか本当に分かりません。 JavascriptまたはjQueryの両方が問題ありません。 ただ、スタート：

<img src="..." id="smiley" value=":)" style="cursor:pointer"> 
    <input type="text" id="copyhere"> 

jQuery('#smiley').on('click', function() { 

}); 

Answer 1

あなたは、パラメータとしてコピーでDocument.execCommand()を使用する必要があります。

$('#smiley').on('click', function() { 
 
    var value = $(this).attr('value'); 
 

 
    copyToClipboard(value); 
 
    
 
    $('#copyhere').val(value); 
 
}); 
 

 
function copyToClipboard(value) { 
 
    var $tmpInput = $('<input>'); 
 
    $tmpInput.val(value); 
 
    $('body').append($tmpInput); 
 
    $tmpInput.select(); 
 
    document.execCommand('copy'); 
 
    $tmpInput.remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="..." id="smiley" value=":)" style="cursor:pointer"> 
 
<input type="text" id="copyhere">