หากคุณต้องการคัดลอกเนื้อหาไปยังคลิปบอร์ดผ่าน JS มันไม่ยาก แต่ถ้าคุณพิจารณาความเข้ากันได้ของเบราว์เซอร์มันจะกลายเป็นปัญหาเล็กน้อย . ฉันจะไม่อธิบายหลักการในรายละเอียดมาพูดคุยเกี่ยวกับวิธีการใช้งาน
ตัวอย่างเช่นรหัส HTML ของฉันมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<div>
<code rel = "1"> <span id = "id_1"> เนื้อหาที่จะคัดลอก 1 </span> </code>
<code rel = "2"> <span id = "id_2"> เนื้อหาที่จะคัดลอก 2 </span> </code>
<code rel = "3"> <span id = "id_3"> เนื้อหาที่จะคัดลอก 3 </span> </code>
</div>
มีไฟล์ JS สองไฟล์ดังนั้นจึงไม่จำเป็นต้องพูดถึง jQuery จากนั้น jQuery-zclip.js และ zeroclipboard.swf /www.steamdev.com/zclip /
JS ที่สร้างปุ่มคัดลอกมีดังนี้
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (function () {
$ ('รหัส') แต่ละ (ฟังก์ชั่น () {
var self = $ (นี่);
var id = self.attr ('rel');
var copy = $ ('<span> คัดลอก </span>'). appendto (self) .zclip ({{{
'Path': '/static/admin/js/zeroclipboard.swf', // เขียนที่อยู่ของคุณเองที่นี่
'aftercopy': function () {
การแจ้งเตือน ('รับที่อยู่ของรหัสที่เกี่ยวข้องถูกคัดลอกไปยังคลิปบอร์ดคุณสามารถใช้ Ctrl+V เพื่อวาง');
-
'คัดลอก': function () {
return $ ('#id _'+id) .Text (); // หมายเหตุที่นี่ถ้าช่วง div ฯลฯ ใช้ text () ถ้าอินพุตใช้ val () การสนับสนุนนี้ไม่ดีมาก
-
-
-
-
</script>
ด้วยวิธีนี้คุณสามารถคัดลอกเวลาข้ามเบราว์เซอร์ ฉันพบว่าแฟลชถูกสร้างขึ้นจริง แต่มันไม่ได้อยู่ในตำแหน่งของข้อความ ฉันตรวจสอบข้อมูลจำนวนมากและบางคนบอกว่าคุณต้องเปลี่ยนรหัส แต่แล้วฉันก็เปลี่ยนมันและก็โอเค
รหัสที่ต้องแก้ไขมีดังนี้
การคัดลอกรหัสมีดังนี้:
getDomObjectPosition: ฟังก์ชั่น (obj, stopobj) {
// รับพิกัดสัมบูรณ์สำหรับองค์ประกอบ DOM
var info = {
ซ้าย: 0,
ด้านบน: 0,
ความกว้าง: obj.width?
ความสูง: obj.height?
-
if (obj && (obj! = stopObj)) {
//info.left += obj.offsetleft;
//info.top += obj.offsettop;
jpos = $ (obj) .position ();
info.left += jpos.left;
info.top += jpos.top;
-
ข้อมูลส่งคืน;
-
ในความเป็นจริงสิ่งนี้มีบางอย่างเกี่ยวกับหลักการของปลั๊กอินนี้ดังนั้นมันจึงครอบคลุมแฟลชโปร่งใสบนปุ่ม