استخدم JS للتحكم في المفاتيح لأعلى ولأسفل ولليسار ولليمين في لوحة المفاتيح (نموذج للتعليمات البرمجية)

هذا رمز JS أساسي. يمكن للأصدقاء الذين يرغبون في تعلم JS دراسته أو توسيعه. من الأفضل استخدام JS للتحكم في لوحة المفاتيح بأكملها، وهو أمر مثير للاهتمام للغاية.

الكود المحدد هو كما يلي:

انسخ رمز الكود كما يلي:

<نمط>

tr.highlight{الخلفية:#08246B;اللون:أبيض;}

</نمط>

<معرف الجدول = "الجليد">

<تر>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

</tr>

<تر>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

</tr>

<تر>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

</tr>

<تر>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

</tr>

<تر>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

<td><نوع الإدخال='نص'></td>

</tr>

</الجدول>

<لغة البرمجة = "جافا سكريبت">

<!--

// تحديد قائمة انتظار التهيئة

فار currentLine=-1;

var currentCol=-1;

document.onkeydown=function(e){

e=window.event||e;

التبديل (e.keyCode) {

الحالة 37: // انقر بزر الماوس الأيسر

currentCol--;

ChangeItem();

استراحة؛

الحالة 38: //مفتاح أعلى

currentLine--;

ChangeItem();

استراحة؛

الحالة 39: // انقر بزر الماوس الأيمن

currentCol++;

ChangeItem();

استراحة؛

الحالة 40: // المفتاح السفلي

currentLine++;

ChangeItem();

استراحة؛

تقصير:

استراحة؛

}

}

// استدعاء مفتاح الاتجاه

وظيفة تغيير العنصر () {

إذا (المستند.الكل)

var it=document.getElementByIdx_x("ice").children[0];

آخر

var it=document.getElementByIdx_x("ice");

for(i=0;i<it.rows.length;i++){

it.rows[i].className="";

}

إذا (الخط الحالي <0) {

currentLine=it.rows.length-1;

}

إذا(currentLine==it.rows.length){

currentLine=0;

}

var objtab=document.all.ice;

var objrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");

إذا (الحالي <0) {

currentCol=objrow. length-1;

}else if(currentCol==objrow.length){

currentCol=0;

}

objrow[currentCol].select();

// استخدام التصحيح

it.rows[currentLine].className="highlight";

}

//-->

</script>