JavaScript คัดลอกข้อความในช่องใส่ข้อมูล HTML

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

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

<textarea id="data">Hello Devdit</textarea>
<br/><br/>
<input type="button" value="คัดลอกข้อความใน TextArea" onclick="copyText()">

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

JavaScript คัดลอกข้อความในช่องใส่ข้อมูล HTML จากตัวอย่างอ้างถึง element id = data ตั้งชื่อว่า copy จากนั้นใช้คำสั่ง select() และ setSelectionRange() สำหรับบนมือถือ เพื่อเลือกข้อความทั้งหมด จากนั้นใช้คำสั่ง navigator.clipboard.writeText เพื่อคัดลอกข้อความในช่องใส่ข้อมูล HTML