วันจันทร์, 27 กันยายน 2564

การคัดลอกข้อความใน Input ไปยังคลิปบอร์ด Copy Text to Clipboard php [Code]

หลายคนกำลังหาวิธีการคัดลอกข้อความใน Input ด้วยปุ่ม button หรือ Copy Text to Clipboard php วันนี้ทำแบบง่าย ๆ รวดเร็ว ประยุกต์ใช้ได้หลากหลาย (ผมใช้ Framework ของ Bootstrap ในการอ้างอิงบางคลาส หากเพื่อน ๆ ใช้ Framework อื่น ๆ กรุณาปรับเปลี่ยนค่าคลาสด้วยนะครับ แต่ในคอร์สนี้ไม่ค่อยมีคลาสเยอะนักครับ)

Code :

<!DOCTYPE html>
<html>
<body>

<p>การคัดลอกข้อความใน input ด้วยปุ่ม button ซึ่งเรียกว่า Copy Text to Clipboard PHP </p>

<!-- สร้างกล่องข้อความด้วย Input -->
<input type="text" value="ข้อความที่จะแสดงในกล่องข้อความ เพื่อน ๆ เปลี่ยนได้ครับ" id="myInput">

<!-- สร้างปุ่มคัดลอกด้วย button ส่วน class="btn btn-dark" สำหรับ Bootstrap -->
<button class="btn btn-dark" onclick="myFunction()"> คัดลอก </button>

<!-- สริปต์การทำงานเกี่ยวกับการคัดลอก Copy text -->
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>

ผลลัพธ์ที่ได้ (Run) :

ก่อนไปทำกัน ผมจะบอกว่าภายในกล่อง Input เพื่อน ๆ สามารคลิกเข้าไปแก้ไข หรือพิมพ์เข้าไปใหม่ได้นะครับ เมื่อเรากดปุ่ม “คัดลอก” เพื่อน ๆ ก็จะได้ข้อความที่อยู่ใน Input ตามที่ระบุ แต่…หากเรา Reflesh หน้าใหม่ ข้อความใน Input ก็จะกลับมาเป็นข้อความเดิมตามที่เราได้ระบุไว้ในโค้ดนะครับ และนี้คือ การสร้างกล่องคัดลอกข้อความใน Input ไปยังคลิปบอร์ด Copy Text to Clipboard php [Code] ++++ ขอให้ทุกคนทำสำเร็จนะครับ บ๊ายยย ++++

เด็กขั้นเทพดอทคอม รับรองว่าเรื่องไอที เป็นเรื่องง๊ายงาย กันเองที่สูดดดด