Javascript - クリック時にテキスト文字列をコピー

Question

オンラインで20分の検索を行ったが、見つからなかった。私が望むのは、ボタンを使わずに、クリックしてテキスト文字列をにコピーできるようにすることです。テキスト文字列は "span"クラス内にあります。

1. ユーザが任意の助けをいただければ幸いです

クリップボードにコピーされたテキスト文字列に

テキスト文字列をクリックする

テキスト文字列の上に置きます。ありがとう！

Answer 1

あなたは、<span>要素にcopyイベントを添付するイベントハンドラ内document.execCommand("copy")を使用し、event.clipboardData

の .setData()方法で span .textContentに event.clipboardDataを設定することができますそれはあなたが立ち往生しているだけで、「ボタンなし」の部分0

const span = document.querySelector("span"); 
 

 
span.onclick = function() { 
 
    document.execCommand("copy"); 
 
} 
 

 
span.addEventListener("copy", function(event) { 
 
    event.preventDefault(); 
 
    if (event.clipboardData) { 
 
    event.clipboardData.setData("text/plain", span.textContent); 
 
    console.log(event.clipboardData.getData("text")) 
 
    } 
 
});

<span>text</span>

Answer 2

これを試してください。 document.execCommand('copy')

1. 要素をクリックして、テキストをコピーし、この入力

function copy(that){ 
 
var inp =document.createElement('input'); 
 
document.body.appendChild(inp) 
 
inp.value =that.textContent 
 
inp.select(); 
 
document.execCommand('copy',false); 
 
inp.remove(); 
 
}

<p onclick="copy(this)">hello man</p>

Answer 3

​​からテキストをコピーしtmpの入力要素

を投稿してください。

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p> 

<center> 
<p id="p1">This is TEXT 1</p> 
<p id="p2">This is TEXT 2</p><br/> 

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button> 
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button> 

<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" /> 
</center> 

のjQueryコードここ

function copyToClipboard(element) { 
    var $temp = $("<input>"); 
    $("body").append($temp); 
    $temp.val($(element).text()).select(); 
    document.execCommand("copy"); 
    $temp.remove(); 
}