Cách copy text vào Clipboard sử dụng Jquery

Đúng như tiêu đề :Cách copy text vào Clipboard sử dụng Jquery, có một số trường hợp nào đó các bạn cần copy một đoạn text hay link url,  …để dán vào đâu đó,  phải quét toàn bộ (ctrl + A) rồi copy(ctrl + C) sau đó dán (paste), làm chỉ 1 hay 2 lần thì chẳng tốn bao nhiêu thời gian nhưng nếu số lượng lớn thì lâu và không chuyên nghiệp gì cả. Các bạn có thể xem thằng Google URL Shortener https://goo.gl/  chỉ cần một cú click chuột là nó đã copy url vào Clipboard. Ở bài này chúng ta sẽ thực hiện chức năng đó bằng jquery.

Các bạn tự thêm thư viện jquery nhá:

Đầu tiên chúng ta có đoạn text sau:

[html]

<p id="copy">
Write text to be copied over here. You can include HTML entities too.
</p>
<button onclick="copyToClipboard(‘#copy’)">Copy to clipboard</button>

[/html]

Chúng ta sẽ nhấn vào button và đoạn text trong thẻ <p> sẽ được copy vào Clipboard nhá, sau là đoạn javascript để copy

[html]

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

[/html]

Chỉ với một đoạn ngắn đó là chúng ta có thể copy dữ liệu một cách chuyên nghiệp, đương nhiên hiện tại cũng có nhiều thư viện hỗ trợ việc này có điều chỉ cần một function nhỏ vậy thì cần thì đến thư viện cho nặng website chúng ta đúng không ạ.

Hy vọng các bạn thành công

[thongbao]

  1. Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
  2. Cảm ơn các bạn đã đọc.

[/thongbao]

Cách copy text vào Clipboard sử dụng Jquery