ประยุกต์คัดลอกข้อมูลด้วย clipboardjs ระหว่างเพจสองหน้า

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
clipboardjs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ clipboardjs

ดูแล้ว 6,514 ครั้ง


เนื้อหาต่อไปนี้เป็นการทดสอบประยุกต์การใช้งาน 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 อาจจะเป้นแนวทางในการประยุกต์ใช้งานอื่นๆ ได้ ลองศึกษาและนำไปใช้กันดู


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: clipboardjs







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ