Sự kiện onchange không hoạt động trên input type color với JavaScript

Xử lý sự kiện onchange cho input type="color"

Sự kiện onchange trên `` kích hoạt khi người dùng **chọn xong màu** (đóng color picker). Cần truyền tham số `this` để truy cập element.

Cú pháp đúng

<input type="color" id="colorPicker" value="#985d5d" onchange="handleColorChange(this)" />

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Color onchange</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        label { display: block; margin-bottom: 10px; font-weight: 500; }
        input[type="color"] { width: 80px; height: 40px; border: none; cursor: pointer; }
        #output { margin-top: 15px; font-family: monospace; font-size: 18px; }
    </style>
</head>
<body>
    <label for="colorPicker">Chọn màu:</label>
    <input type="color" id="colorPicker" value="#985d5d" onchange="showValue(this)" />
    <div id="output">Màu hiện tại: #985d5d</div>

    <script>
        function showColor(inputElement) {
            const colorValue = inputElement.value;
            document.getElementById('output').textContent = 'Màu được chọn: ' + colorValue;
            console.log('Color value:', colorValue);
        }
    </script>
</body>
</html>

Lưu ý quan trọng

• onchange chỉ kích hoạt khi **giá trị thực sự thay đổi** và **color picker đóng lại**.
• Nếu cần theo dõi real-time khi đang chọn, dùng oninput (nhưng support chưa rộng rãi cho color picker).
• Giá trị trả về luôn là **hex 7 ký tự** (ví dụ: #ff0000), không bao giờ là tên màu hay rgb().
• Mặc định value = #000000 nếu không chỉ định.

Cách hiện đại: addEventListener

<input type="color" id="colorPicker" value="#985d5d" />

<script>
    const picker = document.getElementById('colorPicker');
    
    picker.addEventListener('change', (e) => {
        console.log('Đã chọn xong:', e.target.value);
        // Cập nhật UI, gửi server, v.v.
    });
    
    // input event (ít support hơn cho color)
    picker.addEventListener('input', (e) => {
        console.log('Đang chọn:', e.target.value);
    });
</script>

Ứng dụng: Thay đổi màu nền trang

<input type="color" id="bgColor" value="#ffffff" />

<script>
    document.getElementById('bgColor').addEventListener('change', (e) => {
        document.body.style.backgroundColor = e.target.value;
        localStorage.setItem('bgColor', e.target.value);
    });
    
    // Khôi phục khi load trang
    const saved = localStorage.getItem('bgColor');
    if (saved) {
        document.body.style.backgroundColor = saved;
        document.getElementById('bgColor').value = saved;
    }
</script>