Javascript - sao chép chuỗi văn bản khi nhấp vào

Question

Tôi đã dành 20 phút tìm kiếm trực tuyến tốt cho việc này, nhưng không thể tìm thấy nó. Những gì tôi muốn là để có thể sao chép chuỗi văn bản khi nhấp vào mà không cần nút. Chuỗi văn bản sẽ nằm trong lớp "span".

1. dùng di chuột qua chuỗi văn bản
2. Người dùng nhấp chuỗi văn bản
3. bản chuỗi được sao chép vào clipboard

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều. Cảm ơn!

Answer 1

Bạn có thể đính kèm copy sự kiện để <span> yếu tố, sử dụng document.execCommand("copy") trong xử lý sự kiện, thiết event.clipboardData để span.textContent với .setData() phương pháp event.clipboardData

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

Hãy thử điều này. document.execCommand('copy')

1. nhấp vào yếu tố và sao chép văn bản và gửi với yếu tố đầu vào tmp
2. Sau đó, sao chép văn bản từ đầu vào này

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

This is the Code pen.

<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 Mã đây

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