Cập nhật 2020 : Giải pháp này sử dụng execCommand. Mặc dù tính năng đó vẫn ổn tại thời điểm viết câu trả lời này, nhưng hiện tại nó được coi là lỗi thời . Nó vẫn sẽ hoạt động trên nhiều trình duyệt, nhưng việc sử dụng nó không được khuyến khích vì có thể bỏ hỗ trợ.
Có một cách khác không phải là Flash (ngoài API Clipboard được đề cập trong câu trả lời của jfriend00 ). Bạn cần chọn văn bản và sau đó thực hiện lệnhcopy để sao chép vào bảng tạm bất cứ văn bản nào hiện đang được chọn trên trang.
Ví dụ: chức năng này sẽ sao chép nội dung của phần tử được truyền vào bảng tạm (được cập nhật với gợi ý trong các nhận xét từ PointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Đây là cách nó hoạt động:
- Tạo một trường văn bản tạm thời bị ẩn.
- Sao chép nội dung của phần tử vào trường văn bản đó.
- Chọn nội dung của trường văn bản.
- Thực thi bản sao lệnh như :
document.execCommand("copy").
- Loại bỏ trường văn bản tạm thời.
Bạn có thể xem bản demo nhanh tại đây:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Vấn đề chính là không phải tất cả các trình duyệt đều hỗ trợ tính năng này vào lúc này, nhưng bạn có thể sử dụng nó trên các trình duyệt chính từ:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
Cập nhật 1: Điều này cũng có thể đạt được với một giải pháp JavaScript thuần túy (không có jQuery):
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Lưu ý rằng chúng tôi vượt qua id mà không có # ngay bây giờ.
Như madzohan đã báo cáo trong các bình luận bên dưới, có một số vấn đề lạ với phiên bản Google Chrome 64 bit trong một số trường hợp (chạy tệp cục bộ). Vấn đề này dường như được khắc phục với giải pháp không phải jQuery ở trên.
Madzohan đã thử trong Safari và giải pháp đã hoạt động nhưng sử dụng document.execCommand('SelectAll')thay vì sử dụng .select()(như được chỉ định trong trò chuyện và trong các nhận xét bên dưới).
Như PointZeroTwo chỉ ra trong các bình luận , mã có thể được cải thiện để nó sẽ trả về kết quả thành công / thất bại. Bạn có thể xem bản demo trên jsFiddle này .
CẬP NHẬT: SAO CHÉP GIỮ CÁC HÌNH THỨC VĂN BẢN
Như một người dùng đã chỉ ra trong phiên bản tiếng Tây Ban Nha của StackOverflow , các giải pháp được liệt kê ở trên hoạt động hoàn hảo nếu bạn muốn sao chép nội dung của một phần tử theo nghĩa đen, nhưng chúng không hoạt động tuyệt vời nếu bạn muốn dán văn bản được sao chép với định dạng (như nó được sao chép vào một input type="text", định dạng là "mất").
Một giải pháp cho điều đó sẽ là sao chép vào một nội dung có thể chỉnh sửa divvà sau đó sao chép nó bằng cách execCommandtương tự. Ở đây có một ví dụ - nhấp vào nút sao chép và sau đó dán vào hộp có thể chỉnh sửa nội dung bên dưới:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
Và trong jQuery, nó sẽ như thế này:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>