الأحداث في JavaScript: حدث keydown

في هذا الدرس، سنتعلم كيفية استخدام حدث keydown في JavaScript للتفاعل مع الإدخالات على صفحات الويب.

 حدث keydown

يستخدم حدث `keydown` للتفاعل مع لوحة المفاتيح، حيث يتم تنفيذ الكود عندما يتم الضغط على مفتاح على لوحة المفاتيح. في هذا المثال، سنستخدمه لحساب مجموع قيمة الإدخالات وتعديل القيم بناءً على الإدخال الحالي.

```javascript
// استهداف كافة الإدخالات التي تحتوي على الفئة amount
var amountInputs = document.getElementsByClassName('amount');

// إضافة مستمع لحدث keyup لكل إدخال
for (var _input of amountInputs) {
_input.addEventListener('keyup', function() {
var _input = this;
calcAmountForInputs(_input);
});

// إضافة مستمع لحدث blur لكل إدخال
_input.addEventListener('blur', function() {
var _input = this,
_total = document.getElementById('total'),
inputsTotal = 0;

// حساب مجموع قيم الإدخالات
for (var _inp of amountInputs) {
inputsTotal += Number(_inp.value);
}

_total.value = inputsTotal;
});
}

// دالة لحساب القيمة للإدخالات الأخرى
function calcAmountForInputs(_input) {
var currentAmount = _input.getAttribute('data-amount'),
currentValue = _input.value,
_resultToMulti = Number(currentValue) / Number(currentAmount);

// حساب القيم للإدخالات الأخرى باستخدام نسبة القيمة الحالية
for (var _inp of amountInputs) {
if (!_inp.isSameNode(_input)) {
// تعيين قيمة 0 إذا كانت القيمة الحالية أقل من أو تساوي صفر
if (Number(_input.value) <= 0) {
_inp.value = 0;
} else {
var inpAmount = _inp.getAttribute('data-amount'),
result = Number(_resultToMulti) * Number(inpAmount),
checkStringFloat = result.toString().indexOf('.');

// تحويل الناتج إلى ثلاثة أرقام عشرية إذا كانت هناك كسور
if (checkStringFloat >= 0) {
result = result.toFixed(3);
}

_inp.value = result;
}

// إخفاء الإدخال عن طريق إزالة التركيز عنه
_inp.blur();
}
}
}
```

الخلاصة

باستخدام هذا الشرح، يمكنك الآن تفهم كيفية استخدام حدث keydown في JavaScript لتفاعلات معقدة مثل حساب القيم والتعامل مع تغييرات قيم الإدخالات بطريقة ديناميكية على صفحات موقعك.