لقد تعلمت HTML و CSS منذ بعض الوقت ، وأصبحت مهتمين بهذا المجال ، وبدأت في تعلم البرمجة المتقدمة في JavaScript (الإصدار الثالث). لقد تعلمت هذه الأيام وتعلمت للتو محتوى الأحداث وتشكيل البرامج النصية. قبل بضعة أيام ، طلب مني المعلم أن أكتب قطعة من التعليمات البرمجية: في نموذج JavaScript ، استخدم مفتاح Enter ومفاتيح التحريك لأعلى ولأسفل إلى اليسار واليمين لتحريك التركيز من مربع نص واحد إلى مربع النص السابق أو التالي. حاولت كتابة التعليمات البرمجية باستخدام المعرفة التي تعلمتها حتى الآن. واجهت العديد من الصعوبات في الكتابة: حساب المعامل ؛ استخدم هذا والوسائط للعثور على حدث الزناد داخل الوظيفة ؛ استخدم طريقة AddHandler () لإضافة معالجات الأحداث إلى الحدث. بمساعدة المعلم ، قمت بحل المشاكل المذكورة أعلاه. شعرت أنني قد تعلمت الكثير من المعرفة من خلال هذا الرمز ، لذلك كتبت تعليقًا بعد فرزه ونشره.
نسخة الكود كما يلي:
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> </title>
</head>
<body>
<Porm>
<viv> <type type = "text"> </viv>
<viv> <type type = "text"> </viv>
<viv> <type type = "text"> </viv>
<viv> <type type = "text"> </viv>
<viv> <type type = "text"> </viv>
<viv> <input type = "submit"> </viv>
</form>
<script>
وظيفة is_down (e) {
var isdown ؛
e = e || window.event ؛
التبديل (e.KeyCode) {
الحالة 13: // أدخل المفتاح
الحالة 39: // انقل المفتاح إلى اليمين
الحالة 40: // تحرك لأسفل مفتاح
Isdown = صحيح ؛
استراحة؛
الحالة 37: // انقل مفتاح اليسار
الحالة 38: // تحريك المفتاح
Isdown = false ؛
استراحة؛
}
العودة isdown ؛
}
وظيفة key_up () {
// عند استدعاء الوظيفة ، ستقوم الوظيفة نفسها بإنشاء هذا والوسائط
// استخدم هذا والوسائط للعثور على الحقل والتشغيل على التوالي
var e = الوسيطات [1] ؛
العودة is_down (e) === غير محددة؟ صحيح: handle_element (هذا ، is_down (e)) ؛
}
وظيفة handle_element (الحقل ، is_down) {
var elements = field.form.Elements ؛
لـ (var i = 0 ، len = elements.length-1 ؛ i <len ؛ i ++) {
if (الحقل == عناصر [i]) {
استراحة؛
}
}
أنا = is_down؟ (i + 1) ٪ LEN: (i - 1) ٪ len ؛
// (0 === i && is_down) -> اضغط على مفتاح Down بعد التركيز على مربع النص الأخير
// (-1 === i &&! is_down)-> اضغط على مفتاح UP بعد تركيز مربع النص الأول
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
العودة صحيح.
}
عناصر [i] .focus () ؛
var element_arr = ['button' ، 'submit' ، 'Reset' ، 'Select-One' ، 'TextArea'] ؛
if (element_arr.join ('،'). indexof (عناصر [i] .type)> -1)
عناصر [i] .select () ؛
العودة كاذبة
}
// إلغاء أدخل حدث نموذج التقديم الافتراضي
document.onkeydown = function (e) {
e = e || window.event ؛
if (e.KeyCode == 13) {
E.PreventDefault؟ e.preventDefault (): (e.returnvalue = false) ؛
}
} ؛
// التعرف على addeventListener و Actachevent (IE) عبر المتصفحات
وظيفة AddHandler (العنصر ، النوع ، معالج) {
if (element.adDeventListener)
element.addeventListener (النوع ، معالج ، خطأ) ؛
آخر إذا (element.attachevent)
element.attachevent ("on" + type ، handler) ؛
آخر
عنصر ["ON" + type] = معالج ؛
}
var elements = document.forms [0] .elements ؛
لـ (var i = 0 ، len = elements.length ؛ i <len ؛ i ++) {
// إضافة معالج حدث key_up لحدث keyup
AddHandler (عناصر [i] ، "keyup" ، key_up) ؛
}
</script>
</body>
</html>
ما سبق هو كل محتوى الكود. أنا شخصياً أشعر أن الكتابة شاملة للغاية ، وقد تمت معالجة كل الأشياء التي يجب أخذها في الاعتبار. أتمنى أن يحبها الجميع.