เหตุการณ์ oncut: รันสคริปตเมื่อผู้ใช้قص (Cut) ข้อความ

เหตุการณ์ oncut จะถูกกระตุ้นเมื่อผู้ใช้قص (Cut) เนื้อหาขององค์ประกอบ (มักใช้กับ Input, Textarea, หรือ ContentEditable) คล้าย oncopy แต่ข้อมูลจะถูกลบออกจากต้นทางหลังคัดลอก

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

<!DOCTYPE html>
<html>
<body>
    <input type="text" oncut="display()" value="قصฉันได้">
    <h2 id="test">ลองقص (Cut) ข้อความในช่องด้านบน</h2>
    <script>
        function display() {
            document.getElementById("test").innerHTML = "ข้อความถูกقصแล้ว! ✂️";
        }
    </script>
</body>
</html>

ตัวอย่างขั้นสูง: จัดการข้อมูลที่ Cut (Clipboard API)

<textarea id="editor" rows="5" cols="40">เนื้อหาที่สามารถตัดได้</textarea>
<p id="cutLog"></p>

<script>
    const editor = document.getElementById('editor');
    const log = document.getElementById('cutLog');
    
    editor.addEventListener('cut', async (e) => {
        // อ่านข้อมูลที่ถูก Cut (ก่อนถูกลบ)
        const selectedText = editor.value.substring(
            editor.selectionStart, 
            editor.selectionEnd
        );
        
        log.textContent = `قص: "${selectedText}" (${selectedText.length} ตัวอักษร) เวลา: ${new Date().toLocaleTimeString()}`;
        
        // สามารถป้องกันการ Cut ได้
        // if (selectedText.length > 100) { e.preventDefault(); alert('ตัดได้สูงสุด 100 ตัวอักษร'); }
    });
</script>

Clipboard Events ทั้ง 3

การเข้าถึง Clipboard Data (Modern)

element.addEventListener('cut', async (e) => {
    // อ่านจาก Clipboard (ต้องการ Permission)
    try {
        const text = await navigator.clipboard.readText();
        console.log('Cut to clipboard:', text);
    } catch (err) {
        console.log('Clipboard read blocked:', err);
    }
    
    // หรืออ่านจาก Selection โดยตรง (Input/Textarea)
    const target = e.target;
    if (target.selectionStart !== target.selectionEnd) {
        const cutText = target.value.slice(target.selectionStart, target.selectionEnd);
        console.log('Cut text:', cutText);
    }
});