ปรับปรุง 2020 : execCommandการแก้ปัญหานี้ใช้ ในขณะที่คุณลักษณะที่ถูกปรับในช่วงเวลาของการเขียนคำตอบนี้ก็ถือว่าขณะนี้ล้าสมัย มันจะยังคงใช้งานได้กับเบราว์เซอร์จำนวนมาก แต่การใช้งานไม่ได้รับการสนับสนุนเนื่องจากอาจมีการสนับสนุน
มีวิธีอื่นที่ไม่ใช่แฟลช (นอกเหนือจากคลิปบอร์ด API ที่กล่าวถึงในคำตอบของ jfriend00 ) คุณต้องเลือกข้อความแล้วดำเนินการคำสั่งcopyเพื่อคัดลอกไปยังคลิปบอร์ดสิ่งที่ข้อความถูกเลือกในหน้าปัจจุบัน
ตัวอย่างเช่นฟังก์ชั่นนี้จะคัดลอกเนื้อหาขององค์ประกอบที่ส่งผ่านไปยังคลิปบอร์ด (อัปเดตพร้อมคำแนะนำในความคิดเห็นจากPointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
นี่คือวิธีการทำงาน:
- สร้างช่องข้อความที่ซ่อนอยู่ชั่วคราว
- คัดลอกเนื้อหาขององค์ประกอบไปยังช่องข้อความ
- เลือกเนื้อหาของฟิลด์ข้อความ
document.execCommand("copy")รันสำเนาคำสั่งที่ชอบ:- ลบช่องข้อความชั่วคราว
คุณสามารถดูตัวอย่างด่วนได้ที่นี่:
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" />
ปัญหาหลักคือเบราว์เซอร์บางรุ่นไม่สนับสนุนคุณสมบัตินี้ในขณะนี้ แต่คุณสามารถใช้กับเบราว์เซอร์หลักได้จาก:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
อัปเดต 1: สามารถทำได้ด้วยโซลูชัน JavaScript บริสุทธิ์ (ไม่มี 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" />
โปรดสังเกตว่าเราส่งรหัสโดยไม่มี # ตอนนี้
ดังที่madzohanรายงานในความคิดเห็นด้านล่างมีปัญหาบางอย่างกับ Google Chrome รุ่น 64 บิตในบางกรณี (เรียกใช้ไฟล์ในเครื่อง) ดูเหมือนว่าปัญหานี้จะได้รับการแก้ไขด้วยวิธีการที่ไม่ใช่ jQuery ด้านบน
Madzohan พยายามใน Safari และวิธีแก้ปัญหาทำงานได้ แต่ใช้document.execCommand('SelectAll')แทนการใช้.select()(ตามที่ระบุในการแชทและในความคิดเห็นด้านล่าง)
ในฐานะที่เป็นPointZeroTwo ชี้ให้เห็นในความคิดเห็นรหัสอาจมีการปรับปรุงเพื่อที่จะส่งกลับผลลัพธ์ความสำเร็จ / ความล้มเหลว คุณสามารถดูตัวอย่างบนjsFiddleนี้
อัปเดต: คัดลอกเก็บรูปแบบข้อความ
ในฐานะผู้ใช้ที่ชี้ให้เห็นใน StackOverflow เวอร์ชั่นภาษาสเปนการแก้ปัญหาที่กล่าวข้างต้นทำงานได้อย่างสมบูรณ์แบบหากคุณต้องการคัดลอกเนื้อหาขององค์ประกอบอย่างแท้จริง แต่พวกเขาไม่ได้ผลดีนักถ้าคุณต้องการวางข้อความที่คัดลอกด้วยรูปแบบ (เช่น มันถูกคัดลอกไปinput type="text"ยังรูปแบบคือ "หลงทาง")
วิธีการแก้ปัญหาที่จะคัดลอกลงในเนื้อหาที่สามารถแก้ไขได้divแล้วคัดลอกโดยใช้execCommandในลักษณะที่คล้ายกัน นี่คือตัวอย่าง - คลิกที่ปุ่มคัดลอกแล้ววางลงในกล่องแก้ไขเนื้อหาด้านล่าง:
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>
และใน jQuery มันจะเป็นเช่นนี้:
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>