รันสคริปต์เมื่อผู้ใช้วางเนื้อหาในองค์ประกอบด้วย HTML

เหตุการณ์ onpaste จะทำงานเมื่อผู้ใช้วาง (paste) เนื้อหาลงในองค์ประกอบที่รองรับ เช่น <input>, <textarea>, หรือองค์ประกอบที่มี contenteditable

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>ทดสอบการวางข้อความ (Paste)</h2>
  <label for="paste-area">ลองวางข้อความที่นี่:</label>
  <br><br>
  <input type="text" id="paste-area" onpaste="handlePaste()" value="วางข้อความที่นี่" size="40">
  <br><br>
  <h3 id="result">ผลลัพธ์จะแสดงที่นี่</h3>
  
  <script>
    function handlePaste() {
      // ใช้ setTimeout เพื่อให้การวางเสร็จสิ้นก่อนอ่านค่า
      setTimeout(() => {
        const input = document.getElementById('paste-area');
        const result = document.getElementById('result');
        result.textContent = 'ข้อความที่วาง: ' + input.value;
        result.style.color = 'green';
      }, 0);
    }
  </script>
</body>
</html>

การเข้าถึงข้อมูลที่วาง (Clipboard API)

ในปัจจุบันแนะนำให้ใช้ Clipboard API แทน ซึ่งทรงพลังและปลอดภัยกว่า:

<script>
  async function handlePasteModern(event) {
    event.preventDefault(); // ป้องกันการวางแบบเดิม
    
    try {
      const clipboardData = await navigator.clipboard.readText();
      const result = document.getElementById('result');
      result.textContent = 'ข้อความจาก Clipboard API: ' + clipboardData;
      result.style.color = 'blue';
    } catch (err) {
      console.error('ไม่สามารถอ่าน clipboard ได้:', err);
      // fallback ไปใช้วิธีเดิม
    }
  }
  
  // ใช้กับ textarea หรือ contenteditable
  document.getElementById('paste-area').addEventListener('paste', handlePasteModern);
</script>

เหตุการณ์ Clipboard ที่เกี่ยวข้อง

กรณีใช้งานจริง

• จัดรูปแบบข้อความอัตโนมัติเมื่อวาง (auto-formatting)
• ตรวจสอบ/กรองเนื้อหาที่วาง (content filtering)
• นับจำนวนคำ/ตัวอักษรแบบเรียลไทม์
• แปลงลิงก์ที่วางเป็นรูปแบบเฉพาะ