Pass web's data to Computer's clipboard via Javascript
. Giới thiệu Như mọi người đã biết, ngày nay để đảm bảo an toàn, hầu hết các trình duyệt không cho phép browser truy cập trực tiếp vào computer's clipboard. Chúng ta có thể sử dụng chuột để copy 1 đoạn văn bản nào đó một cách dễ dàng, tuy nhiên để copy 1 đoạn văn bản dài hoặc copy cùng lúc ...
0. Giới thiệu
Như mọi người đã biết, ngày nay để đảm bảo an toàn, hầu hết các trình duyệt không cho phép browser truy cập trực tiếp vào computer's clipboard.
Chúng ta có thể sử dụng chuột để copy 1 đoạn văn bản nào đó một cách dễ dàng, tuy nhiên để copy 1 đoạn văn bản dài hoặc copy cùng lúc nhiều đoạn văn bản nằm ở nhiều khu vực khác nhau trên 1 trang web thì sẽ mất khá nhiều công đoạn. Ngoài ra cũng có thể do yêu cầu mà trang web đó không cho phép sử dụng menu chuột phải, việc copy văn bản trên trang web đó không còn dễ dàng nữa.
Mục tiêu của bài viết này là đưa ra 2 phương án để giải quyết vấn đề trên.
1. Không sử dụng flash (IE Only)
Cách này khá đơn giản, sử dụng
window.clipboardData
- Javascript
function CopyToClipboard () {
var input = document.getElementById ("toClipboard");
window.clipboardData.setData ("Text", input.value);
}
function ShowClipboardContent () {
alert (window.clipboardData.getData ("Text"));
}
function ClearClipboard () {
window.clipboardData.clearData ("Text");
}
- HTML
<input id="toClipboard" value="text to clipboard"/>
<button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
<button onclick='ShowClipboardContent ();'>Show text data in clipboard</button>
<button onclick='ClearClipboard ();'>Clear text data from clipboard</button>
Ví dụ: Copy to ClipBoard in IE
2. Sử dụng flash (cross-browser)
Trong bài viết này chỉ đề cập tớp sử dụng thư viện ZeroClipboard.
ZeroClipboard là thư viện được cung cấp miễn phí cho phép lập trình viên đưa dữ liệu vào clipboard một cách dễ dàng.
Yêu cầu: trình duyệt hỗ trợ Javascript và Adobe Flash.
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.
This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mousedown effects.
- Setup ZeroClipboard
<script type="text/javascript" src="ZeroClipboard.js"></script>
Nếu file ZeroClipboard.swf nằm cùng thư mục với file ZeroClipboard.js thì không phải đặt lại đường dẫn tới nó:
ZeroClipboard.config({swfPath: "path/to/ZeroClipboard.swf"});
- Sử dụng
Cách đơn giản: sử dụng data attribute
<script>
var client = new ZeroClipboard($("button#my-button"));
</script>
<button id="my-button" data-clipboard-text="Copy me!" title="Click to copy to clipboard.">Copy to Clipboard</button>
Chỉ cần click vào button <button href="#">Copy to Clipboard</button> thì dữ liệu được lưu trong data-clipboard-text sẽ được lưu vào clipboard.
ZeroClipboard cho phép xử lí khá nhiều sự kiện như copy, aftercopy, error, mousedown, complete...
Ví dụ đầy đủ hơn:
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/ZeroClipboard.js"></script>
<script type="text/javascript" src="/path/to/main.js"></script>
</head>
<body>
<textarea name="box-content" id="box-content" rows="5" cols="70">
The test text
</textarea>
<button class="clip_button" style="cursor: pointer">Copy</button>
</body>
</html>
//main.js
//create client
var client = new ZeroClipboard( $('.clip_button') );
client.on( 'ready', function(event) {
//event
client.on('copy', function(event) {
event.clipboardData.setData('text/plain', document.getElementsByName('box-content')[0].value);
});
client.on('aftercopy', function(event) {
console.log('Copied data: ' + event.data['text/plain']);
event.target.disabled = true;
});
});
client.on('error', function(event) {
ZeroClipboard.destroy();
});
Ngoài ra ZeroClipboard còn cho phép đặt định dạng dữ liệu để copy như text/plain, text/html, application/***,...
client.on( "copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", "Copy me!" );
clipboard.setData( "text/html", "<b>Copy me!</b>" );
clipboard.setData( "application/rtf", "{
tf1ansi
{ Copy me!}}" );
});
Ví dụ: Copy data to clipboard
