Event ใดเกิดเมื่อ Cut เนื้อหา Element ใน JavaScript?

Event oncut ทริกเกอร์เมื่อ User Cut เนื้อหา ของ Element (Ctrl+X, Right-click → Cut, Menu → Cut) — ต้องเป็น Editable Element

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <body>
    <input type="text" oncut="cutFunction()" value="cut the text">
    <script>
      function cutFunction() {
        document.write("Text cut!");
      }
    </script>
  </body>
</html>

คำอธิบาย

• ทริกเกอร์ก่อน Cut จริง — สามารถ event.preventDefault() เพื่อ Block Cut
• เข้าถึง/แก้ไข Clipboard: event.clipboardData.setData('text/plain', 'custom')
• ทำงานกับ: Input, Textarea, ContentEditable (ต้อง Select Text ก่อน)

ClipboardData ใน Cut Event

element.addEventListener('cut', (e) => {
  const selection = window.getSelection().toString();
  // Log Analytics
  analytics.track('content_cut', {length: selection.length});
  
  // Modify Clipboard Data
  e.clipboardData.setData('text/plain', '[CUT] ' + selection);
  e.preventDefault(); // ต้อง preventDefault เพื่อ Override
});

Copy vs Cut vs Paste

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

• Rich Text Editor: Handle Cut Formatting, Cleanup HTML
• Data Transformation: Convert Cut Data Format
• Undo Stack: Push State ก่อน Cut
• Security: Block Cut ใน Sensitive Fields (Password, Credit Card)

// Block Cut in Password Field
passwordInput.addEventListener('cut', (e) => e.preventDefault());