ปุ่มคัดลอก PHP คัดลอกข้อมูลในช่องใส่ข้อมูล

สอนสร้างปุ่มคัดลอก PHP คัดลอกข้อมูลในช่องใส่ข้อมูล เช่น TextBox หรือ TextArea บทความนี้แนะนำการใช้คำสั่ง navigator.clipboard.writeText ของภาษา JavaScript เพื่อคัดลอกข้อมูล สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ปุ่มคัดลอก PHP คัดลอกข้อมูลในช่องใส่ข้อมูล

<input type="text" id="txt" value="สวัสดี Devdit">

<?php
    echo "<input type='button' value='คัดลอก' onclick='copyText(\"txt\")'>";
?>

<script>
    function copyText( e ) {
        var c = document.getElementById( e );
  
        c.select();
        c.setSelectionRange(0, 99999);
  
        navigator.clipboard.writeText(c.value);
        alert("ข้อความที่คัดลอกคือ "+c.value);        
    }
</script>

ปุ่มคัดลอก PHP เริ่มต้นสร้างปุ่มด้วยแท็ก input button จากนั้นใช้ attribute onclick กรณีถ้าผู้ใช้งานกดคลิกปุ่มจะเรียกใช้ฟังก์ชัน copyText โดยส่งค่า elements id ที่ต้องการลงไป คือ txt ซึ่งอ้างถึง id = txt ของ input type text โดยในฟังก์ชัน copyText จะใช้คำสั่ง select และ setSelectionRange สำหรับเลือกข้อความทั้งหมด พร้อมกับคัดลอกหรือ copy ด้วยคำสั่ง navigator.clipboard.writeText จากนั้นแสดง alert ข้อความที่คัดลอกออกสู่หน้าเว็บไซต์