أحداث لوحة المفاتيح والماوس

<input type="text" id="searchBox" placeholder="اكتب للبحث...">
<div id="keyInfo"></div>

<script>
$("#searchBox").on("keydown", function(event) {
    let key = event.key;
    let keyCode = event.keyCode;

    $("#keyInfo").html(
        "المفتاح: <strong>" + key + "</strong><br>" +
        "كود المفتاح: <strong>" + keyCode + "</strong>"
    );
});
</script>

$(document).on("keydown", function(event) {
    console.log("المفتاح:", event.key);           // المفتاح الفعلي (مثل "a", "Enter")
    console.log("كود المفتاح:", event.keyCode);  // الكود الرقمي (مهمل)
    console.log("الكود:", event.code);            // كود المفتاح الفيزيائي (مثل "KeyA")
    console.log("Shift:", event.shiftKey);        // true إذا كان Shift مضغوطاً
    console.log("Ctrl:", event.ctrlKey);          // true إذا كان Ctrl مضغوطاً
    console.log("Alt:", event.altKey);            // true إذا كان Alt مضغوطاً
    console.log("Meta:", event.metaKey);          // true إذا كان مفتاح Cmd/Windows مضغوطاً
});

<input type="text" id="chatInput" placeholder="اكتب رسالة واضغط Enter">
<div id="chatMessages"></div>

<script>
$("#chatInput").on("keydown", function(event) {
    if (event.key === "Enter" || event.keyCode === 13) {
        event.preventDefault();

        let message = $(this).val();
        if (message.trim() !== "") {
            $("#chatMessages").append("<p>" + message + "</p>");
            $(this).val(""); // مسح الإدخال
        }
    }
});
</script>

<div id="player" style="position:relative; width:50px; height:50px;
     background:var(--primary); left:0; top:0;"></div>

<script>
let position = { x: 0, y: 0 };
const step = 10;

$(document).on("keydown", function(event) {
    switch(event.key) {
        case "ArrowUp":
            position.y -= step;
            break;
        case "ArrowDown":
            position.y += step;
            break;
        case "ArrowLeft":
            position.x -= step;
            break;
        case "ArrowRight":
            position.x += step;
            break;
        default:
            return; // الخروج إذا لم يكن مفتاح سهم
    }

    event.preventDefault(); // منع تمرير الصفحة

    $("#player").css({
        left: position.x + "px",
        top: position.y + "px"
    });
});
</script>

$(document).on("keydown", function(event) {
    // Ctrl+S أو Cmd+S للحفظ
    if ((event.ctrlKey || event.metaKey) && event.key === "s") {
        event.preventDefault();
        alert("تم تفعيل اختصار الحفظ!");
        // تنفيذ عملية الحفظ
    }

    // Ctrl+Z أو Cmd+Z للتراجع
    if ((event.ctrlKey || event.metaKey) && event.key === "z") {
        event.preventDefault();
        alert("تم تفعيل اختصار التراجع!");
        // تنفيذ عملية التراجع
    }

    // مفتاح Escape لإغلاق النافذة المنبثقة
    if (event.key === "Escape") {
        $(".modal").hide();
    }
});
</script>

<div id="canvas" style="width:400px; height:300px;
     background:var(--bg-light); position:relative;">
    <div id="coordinates"></div>
</div>

<script>
$("#canvas").on("mousemove", function(event) {
    // بالنسبة للعنصر
    let x = event.offsetX;
    let y = event.offsetY;

    // بالنسبة للصفحة
    let pageX = event.pageX;
    let pageY = event.pageY;

    // بالنسبة لمنفذ العرض
    let clientX = event.clientX;
    let clientY = event.clientY;

    $("#coordinates").html(
        "العنصر: (" + x + ", " + y + ")<br>" +
        "الصفحة: (" + pageX + ", " + pageY + ")<br>" +
        "منفذ العرض: (" + clientX + ", " + clientY + ")"
    );
});
</script>

<div id="clickArea" style="width:300px; height:200px;
     background:var(--bg-light);">
    انقر بأزرار الماوس المختلفة
</div>
<div id="buttonInfo"></div>

<script>
$("#clickArea").on("mousedown", function(event) {
    let button;

    switch(event.which) {
        case 1:
            button = "الزر الأيسر";
            break;
        case 2:
            button = "الزر الأوسط";
            break;
        case 3:
            button = "الزر الأيمن";
            break;
    }

    $("#buttonInfo").text("تم النقر على " + button);
});

// منع قائمة السياق بالنقر الأيمن
$("#clickArea").on("contextmenu", function(event) {
    event.preventDefault();
});
</script>

<div id="draggable" style="width:100px; height:100px;
     background:var(--primary); position:absolute; cursor:move;">
    اسحبني
</div>

<script>
let isDragging = false;
let currentElement = null;
let offset = { x: 0, y: 0 };

$("#draggable").on("mousedown", function(event) {
    isDragging = true;
    currentElement = $(this);

    // حساب الإزاحة من الماوس إلى أعلى يسار العنصر
    offset.x = event.pageX - currentElement.offset().left;
    offset.y = event.pageY - currentElement.offset().top;

    currentElement.css("opacity", "0.7");
});

$(document).on("mousemove", function(event) {
    if (isDragging && currentElement) {
        // تحديث موضع العنصر
        currentElement.css({
            left: event.pageX - offset.x + "px",
            top: event.pageY - offset.y + "px"
        });
    }
});

$(document).on("mouseup", function() {
    if (isDragging) {
        isDragging = false;
        if (currentElement) {
            currentElement.css("opacity", "1");
            currentElement = null;
        }
    }
});
</script>

<div id="hoverBox" style="width:300px; height:300px;
     background:var(--bg-light); position:relative; overflow:hidden;">
    <div id="spotlight" style="width:100px; height:100px;
         background:var(--primary); border-radius:50%;
         position:absolute; pointer-events:none; opacity:0.3;"></div>
</div>

<script>
$("#hoverBox").on("mousemove", function(event) {
    let x = event.offsetX - 50; // توسيط الضوء
    let y = event.offsetY - 50;

    $("#spotlight").css({
        left: x + "px",
        top: y + "px"
    });
}).on("mouseenter", function() {
    $("#spotlight").show();
}).on("mouseleave", function() {
    $("#spotlight").hide();
});
</script>

<div id="contentArea" style="width:400px; height:300px;
     background:var(--bg-light);">
    انقر بالزر الأيمن للقائمة المخصصة
</div>

<div id="customMenu" style="display:none; position:absolute;
     background:white; border:1px solid #ddd; padding:10px;">
    <div class="menu-item">نسخ</div>
    <div class="menu-item">لصق</div>
    <div class="menu-item">حذف</div>
</div>

<script>
$("#contentArea").on("contextmenu", function(event) {
    event.preventDefault();

    // وضع وإظهار القائمة المخصصة
    $("#customMenu").css({
        left: event.pageX + "px",
        top: event.pageY + "px",
        display: "block"
    });
});

// إخفاء القائمة عند النقر في مكان آخر
$(document).on("click", function() {
    $("#customMenu").hide();
});

// التعامل مع نقرات عناصر القائمة
$(".menu-item").on("click", function(event) {
    event.stopPropagation();
    alert("تم النقر على " + $(this).text());
    $("#customMenu").hide();
});
</script>

<canvas id="drawingCanvas" width="500" height="400"
        style="border:2px solid var(--primary);"></canvas>
<br>
<button id="clearCanvas">مسح</button>
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="brushSize" min="1" max="20" value="5">

<script>
let canvas = document.getElementById("drawingCanvas");
let ctx = canvas.getContext("2d");
let isDrawing = false;
let brushColor = "#000000";
let brushSize = 5;

$("#drawingCanvas").on("mousedown", function(event) {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
});

$("#drawingCanvas").on("mousemove", function(event) {
    if (isDrawing) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.strokeStyle = brushColor;
        ctx.lineWidth = brushSize;
        ctx.lineCap = "round";
        ctx.stroke();
    }
});

$("#drawingCanvas").on("mouseup mouseleave", function() {
    isDrawing = false;
});

$("#clearCanvas").on("click", function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

$("#colorPicker").on("change", function() {
    brushColor = $(this).val();
});

$("#brushSize").on("input", function() {
    brushSize = $(this).val();
});
</script>

<div class="item-list">
    <div class="item">عنصر 1</div>
    <div class="item">عنصر 2</div>
    <div class="item">عنصر 3</div>
    <div class="item">عنصر 4</div>
    <div class="item">عنصر 5</div>
</div>

<script>
$(".item").on("click", function(event) {
    // تحديد متعدد مع Ctrl/Cmd
    if (event.ctrlKey || event.metaKey) {
        $(this).toggleClass("selected");
    } else {
        // تحديد واحد
        $(".item").removeClass("selected");
        $(this).addClass("selected");
    }
});

// حذف العناصر المحددة بمفتاح Delete
$(document).on("keydown", function(event) {
    if (event.key === "Delete") {
        $(".item.selected").remove();
    }
});
</script>

<style>
.item {
    padding: 10px;
    margin: 5px;
    background: var(--bg-light);
    cursor: pointer;
}
.item.selected {
    background: var(--primary);
    color: white;
}
</style>