เนื้อหาต่อไปนี้เป็นการทดสอบประยุกต์การใช้งาน clipboardjs สำหรับการคัดลอกข้อมูล
จาดฟอร์มในหน้าเพจหนึ่ง ไปใช้งานในหน้าเพจอีกหน้าที่มีรูปแบบคล้ายกัน
ใช้สำหรับ เช่น กรณีเราต้องการกรอกข้อมูลเดิมซ้ำ แต่ไม่ต้องการกดคัดลอกและวาง
ที่ละตัว แต่ใช้วิธีการ คัดลอกรายการข้อมูลที่ต้องการทั้งหมด แล้วไปวางอีกหน้าในครั้งเดียว
ดูตัวอย่างการทำงาน ด้านล่าง
ด้านซ้ายสมมติเป็นหน้า clipboard1.php มีข้อมูลอยู่ในฟอร์มแล้ว และเราต้องการคัดลอกข้อมูล
จากหน้านี้ไปอีกหน้า clipboard2.php ที่ยังไม่มีข้อมูล โดยกดปุ่ม copy หน้าแรก เพื่อเก็บข้อมูล
ที่ต้องการลงใน clipboard จากนั้นคลิกไปที่ไฟล์ clipboard2.php ตรงไหนก็ได้ แล้วกดปุม
ctrl+v เพื่อวางข้อมูลที่คัดลอกมา ลงในฟอร์ม แบบนี้เป็นต้น
การทำงานข้างต้นใช้ plugin ชื่อ clipboardjs
ศึกษาเพิ่มเติมได้ที่ https://clipboardjs.com/
ไฟล์ทดสอบโค้ดเหมือนกัน สองไฟล์ ชื่อ clipboard1.php กับ clipboard2.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="place_banner1" style="margin:auto;width:300px;">
<input type="text" name="" class="use_clipboard">
<br><br>
<input type="text" name="" class="use_clipboard">
<br><br>
<input type="text" name="" class="use_clipboard">
<br><br>
<input type="text" name="" class="use_clipboard">
<br><br>
<textarea cols="30" rows="3" class="use_clipboard"></textarea>
<br><br>
<!-- Trigger -->
<button class="btn_copy" >
Copy
</button>
<br><br>
<div>
<textarea name="place_paste" id="placePaste" cols="30" rows="1" style="position: absolute;
visibility: visible;
border: 0;
color: #FFFFFF;"></textarea>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.8/clipboard.min.js"></script>
<script type="text/javascript">
$(function(){
// กำหนด object ที่ต้องการพักข้อมูลจาก clipbaord เมื่อกด ctrl+v
var objPaste=$("#placePaste");
// เมื่อปุ่มที่มี css class ชื่อ btn_copy ถูกคลิก
new Clipboard('.btn_copy', {
text: function(trigger) {
// สร้างตัวแปรมาไว้เก็บค่า
var dataText="";
$(".use_clipboard").each(function(k,v){ // วนลูปเก็บค่าเฉพาะส่วนทีเราต้องการ
dataText+=$(".use_clipboard").eq(k).val(); // เก็บค่า
dataText+="|"; // เก็บค่าตัวแบ่ง ในทีนี้ใช้ ( | ) ดังนั้นในข้อความจะต้องไม่มีเครื่องหมายนี้
});
return dataText;// เก็บค่าที่ได้ไว้ใน clipboard ค่าจะเป็นประมาณเช่น 1|2|3|4|
}
});
// ดักจับการคลิกที่ปุ่มบน keyboard กรณี กดปุ่ม และเมื่อปล่อย
$(document.body).on("keydown keyup",function(e){
if(e.ctrlKey==true){ // เช็ควา่มีการกดปุ่ม ctrl หรือไม่
if(e.keyCode==86){ // เช็คว่ามีการกดปุ่มตัว v หรือไม่ หมายถึงกด ctrl+v หรือ (paste) วาง
if(e.type=="keydown"){// เมือกดปุ่ม
objPaste.focus();// โฟกัสไปที่พักข้อมูล
}
if(e.type=="keyup"){ // เมื่อปล่อยปุ่ม
var contentVal=objPaste.val(); // นำข้อมูลที่ถูกพักไว้มาไว้ในตัวแปร
var arr_text=contentVal.split("|"); // แยกค่าด้วย |
$(".use_clipboard").each(function(k,v){ // วนลูปนำข้อมูลกับไปแสดง
$(".use_clipboard").eq(k).val(arr_text[k]);
});
objPaste.val(""); // ล้างค่าส่วนของที่พักค่าจาก clipboard
objPaste.blur(); // โฟกัสออกจากที่พักข้อมูล
}
}
}
});
});
</script>
</body>
</html>
แนวทางคือ ในตอนนี้จะใช้ได้กับส่วนของ textbox และ textarea เท่านั้น
วิธีคือเราจะกำหนดชื่อ css class ให้กับ textbox และ textarea ที่เราต้องการคัดลอกค่า
เช่น
<textarea cols="30" rows="3" >ข้อมูลที่ 5</textarea>
เป็น
<textarea cols="30" rows="3" class="use_clipboard">ข้อมูลที่ 5</textarea>
กรณีมี css class เดิมอยู่แล้ว ก็ให้เพิ่มต่อเข้าไป โดยเว้นวรรค เช่น
<textarea cols="30" rows="3" class="form-control use_clipboard">ข้อมูลที่ 5</textarea>
จากนั้นจะมีปุ่มให้กดเพื่อทำการคัดลอกค่าจาก textbox และ textarea ที่เราต้องการ
เมื่อกดปุ่มแล้ว ก็จะเก็บค่าเป็นข้อความต่อกันยาวๆ ไว้ใน clipboard ต่อกันด้วยเครื่องหมาย |
แล้วเมื่อเปิดไปอีกหน้า คลิกที่ว่างในหน้านั้น 1 ครั้ง แล้วกด ctrl+v ข้อมูลก็จะไปเก็บไว้ใน textarea
ซึ่งเป็นที่พักข้อมูลชั่วคราว เราอาจจะพรางให้มองไม่เห็น หรือให้ไม่เด่นด้วย css ก็ได้ ตามด้านล่าง
<textarea name="place_paste" id="placePaste" cols="30" rows="1" style="position: absolute;
visibility: visible;
border: 0;
color: #FFFFFF;"></textarea>
จากนั้นข้อมูลก็จะถูกนำไปแยก และนำไปแสดงใน textbox และ textarea ที่เรากำหนด กระบวนการก็ประมาณนี้
clipboardjs อาจจะเป้นแนวทางในการประยุกต์ใช้งานอื่นๆ ได้ ลองศึกษาและนำไปใช้กันดู
