حدث مفتاح جافا سكريبت (متوافق مع جميع المتصفحات)

الجزء 1: الأحداث الرئيسية للمتصفح

لتنفيذ keylogging باستخدام js، تحتاج إلى الانتباه إلى أنواع الأحداث الرئيسية الثلاثة للمتصفح، وهي keydown وkeypress وkeyup، والتي تتوافق مع مقابض الأحداث الثلاثة onkeydown وonkeypress وonkeyup على التوالي. ستؤدي عملية الضغط النموذجية إلى إنشاء جميع الأحداث الثلاثة، بالترتيب، الضغط على المفتاح، ثم الضغط على المفتاح، ثم الضغط على المفتاح عند تحرير المفتاح.

من بين هذه الأنواع الثلاثة من الأحداث، يكون مستوى الضغط على المفتاح والضغط على المفتاح منخفضًا نسبيًا، في حين أن الضغط على المفتاح يكون متقدمًا نسبيًا. ما يسمى بالمتقدم هنا يعني أنه عندما يضغط المستخدم على Shift + 1، يقوم الضغط على المفتاح بتوزيع حدث المفتاح وإرجاع حرف "!" قابل للطباعة، بينما يسجل الضغط على زر Shift + 1 فقط حدث Shift + 1. [1]

ومع ذلك، يكون الضغط على المفاتيح فعالاً فقط مع بعض الأحرف التي يمكن طباعتها، بالنسبة لمفاتيح الوظائف، مثل F1-F12 وBackspace وEnter وEscape وPageUP وPageDown واتجاهات الأسهم، لن يتم إنشاء حدث الضغط على المفتاح، ولكن keydown وkeyup. يمكن توليد الحدث. ومع ذلك، في FireFox، يمكن لمفاتيح الوظائف إنشاء أحداث الضغط على المفاتيح.

تحتوي كائنات الأحداث التي تم تمريرها إلى معالجات أحداث keydown وkeypress وkeyup على بعض الخصائص الشائعة. إذا تم الضغط على Alt أو Ctrl أو Shift معًا باستخدام مفتاح، فسيتم تمثيل ذلك من خلال خصائص altKey وctrlKey وshiftKey الخاصة بالحدث، والتي تكون مشتركة بين FireFox وIE.

الجزء الثاني: المتصفحات المتوافقة

يجب على أي ملف js يتضمن متصفحات أن يأخذ في الاعتبار مشكلات توافق المتصفح.

حاليًا، تعتمد المتصفحات شائعة الاستخدام بشكل أساسي على IE وعلى Mozilla. يعتمد Maxthon على نواة IE، في حين يعتمد FireFox وOpera على نواة Mozilla.

2.1 تهيئة الأحداث

أول شيء تحتاج إلى معرفته هو كيفية تهيئة الحدث. البيان الأساسي هو كما يلي:

وظيفة keyDown () {}

document.onkeydown = keyDown;

عندما يقرأ المتصفح هذا البيان، فإنه سوف يستدعي الدالة KeyDown() بغض النظر عن المفتاح الذي يتم الضغط عليه على لوحة المفاتيح.

2.2 طرق تنفيذ FireFox وOpera

يعد تنفيذ برامج مثل FireFox وOpera أكثر إزعاجًا من IE، لذا سأصفها هنا أولاً.

تحتوي الدالة keyDown() على متغير مخفي - بشكل عام، نستخدم الحرف "e" لتمثيل هذا المتغير.

وظيفة keyDown (ه)

يمثل المتغير e حدث ضغطة مفتاح، للعثور على المفتاح الذي تم الضغط عليه، استخدم السمة التي:

هـ

e.والتي سوف تعطي قيمة الفهرس للمفتاح تتطلب طريقة تحويل قيمة الفهرس إلى القيمة الأبجدية الرقمية للمفتاح استخدام الدالة الثابتة String.fromCharCode()، كما يلي:

String.fromCharCode(e.what)

من خلال تجميع العبارات المذكورة أعلاه معًا، يمكننا معرفة المفتاح الذي تم الضغط عليه في FireFox:

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

وظيفة keyDown (ه) {

var keycode = e.what;

var realkey = String.fromCharCode(e.what);

تنبيه ("رمز المفتاح: " + رمز المفتاح + " الحرف: " + مفتاح حقيقي)؛

}

document.onkeydown = keyDown;

2.3 طريقة تنفيذ IE

لا يحتاج برنامج IE إلى المتغير e. استخدم window.event.keyCode بدلاً من e.what. طريقة تحويل قيمة فهرس المفتاح إلى قيمة المفتاح الحقيقي مشابهة: String.fromCharCode(event.keyCode). على النحو التالي:

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

وظيفة المفتاح () {

var keycode = events.keyCode;

var realkey = String.fromCharCode(event.keyCode);

تنبيه ("رمز المفتاح: " + رمز المفتاح + " الحرف: " + مفتاح حقيقي)؛

}

document.onkeydown = keyDown;

2.4 تحديد نوع المتصفح

لقد تعلمنا أعلاه كيفية الحصول على كائن الحدث الرئيسي في المتصفحات المختلفة، ثم نحتاج إلى تحديد نوع المتصفح. هناك العديد من الطرق، وبعضها أسهل في الفهم، وهناك أيضًا طرق ذكية جدًا : أي استخدام سمة appName لكائن المستكشف. بالطبع، يمكنك أيضًا استخدام سمة userAgent. هنا، يتم استخدام appName لتحديد نوع المتصفح. ، واسم تطبيق FireFox وOpera هو "Netscape"، لذا فإن الكود ذو الوظيفة البسيطة نسبيًا هو كما يلي:

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

وظيفة keyUp (ه) {

إذا (navigator.appName == "مايكروسوفت إنترنت إكسبلورر")

{

var keycode = events.keyCode;

var realkey = String.fromCharCode(event.keyCode);

}آخر

{

var keycode = e.what;

var realkey = String.fromCharCode(e.what);

}

تنبيه ("رمز المفتاح: " + رمز المفتاح + " الحرف: " + مفتاح حقيقي)؛

}

document.onkeyup = keyUp;

الطريقة الأسهل هي [2]:

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

وظيفة keyUp (ه) {

var currKey=0,e=e||event;

currKey=e.keyCode||e.what||e.charCode;

var keyName = String.fromCharCode(currKey);

تنبيه ("رمز المفتاح: " + currKey + " الحرف: " + keyName)؛

}

document.onkeyup = keyUp;

الطريقة المذكورة أعلاه أكثر ذكاءً واسمحوا لي أن أشرحها باختصار:

أولًا، الكود e=e||event مخصص للتوافق مع عملية الحصول على كائن حدث المتصفح. معنى هذا الكود في js هو أنه إذا كان المتغير المخفي e موجودًا في FireFox أو Opera، فإن e||event يُرجع e. إذا لم يكن المتغير المخفي e موجودًا في IE، فسيتم إرجاع الحدث.

ثانيًا، currKey=e.keyCode |. هناك سمات أي وcharCode في Opera، وهناك سمات keyCode وأي سمات في Opera.

الكود أعلاه متوافق فقط مع المتصفح، ويحصل على كائن حدث keyup، وينبثق ببساطة رمز المفتاح والأحرف الرئيسية اضغط على مفتاح Shift، والأحرف غريبة جدًا، لذا يحتاج الكود إلى التحسين.

الجزء 3: تنفيذ التعليمات البرمجية وتحسينها

3.1 الرموز الرئيسية ورموز الأحرف للأحداث الرئيسية

تفتقر رموز المفاتيح ورموز الأحرف للأحداث الرئيسية إلى إمكانية النقل بين المتصفحات. بالنسبة للمتصفحات المختلفة وأحداث الحالة المختلفة، تختلف طرق تخزين رموز المفاتيح ورموز الأحرف.....

في IE، توجد سمة keyCode واحدة فقط، ويعتمد تفسيرها على نوع الحدث. بالنسبة لمفتاح التشغيل، يقوم keyCode بتخزين رمز المفتاح. بالنسبة لأحداث الضغط على المفتاح، يقوم keyCode بتخزين رمز الحرف. لا توجد سمات who وcharCode في IE، لذلك تكون سمات who وcharCode غير محددة دائمًا.

رمز المفتاح في FireFox هو دائمًا 0. عندما يكون الوقت هو مفتاح التشغيل/التشغيل، يكون charCode=0، وهو رمز المفتاح. عند الضغط على مفتاح الحدث، تكون قيم charCode هي نفسها، ويتم تخزين رمز الحرف.

في Opera، تكون قيم keyCode والتي تكون دائمًا هي نفسها في حدث keydown/keyup، يقومون بتخزين رمز المفتاح في وقت الضغط على المفتاح، ولا يتم تعريف charCode وهو دائمًا غير محدد.

3.2 استخدم المفتاح للأسفل/للأعلى أو للضغط على المفتاح

قدم الجزء الأول الفرق بين keydown/keyup وkeypress. هناك قاعدة عامة مفادها أن حدث keydown هو الأكثر فائدة لمفاتيح الوظائف، في حين أن حدث keypress هو الأكثر فائدة للمفاتيح القابلة للطباعة [3].

تسجيل لوحة المفاتيح مخصص بشكل أساسي للأحرف القابلة للطباعة وبعض مفاتيح الوظائف، لذا فإن الضغط على المفتاح هو الخيار الأول، ومع ذلك، كما ذكرنا في الجزء الأول، فإن الضغط على المفاتيح في IE لا يدعم مفاتيح الوظائف، لذا يجب استخدام أحداث keydown/keyup لتكملة ذلك.

3.3 تنفيذ التعليمات البرمجية

الفكرة العامة هي استخدام كائن حدث keypress للحصول على الأحرف الرئيسية، واستخدام حدث keydown للحصول على الأحرف الوظيفية، مثل Enter وBackspace وما إلى ذلك.

تنفيذ التعليمات البرمجية على النحو التالي

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

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<أتش تي أم أل>

<HEAD><TITLE>تسجيل ضغطات المفاتيح js</TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="Yu Shangren">

<META NAME="Keywords" CONTENT="تسجيل ضغطات المفاتيح js">

<META NAME="Description" CONTENT="تسجيل ضغطات المفاتيح js">

</الرأس>

<الجسم>

<نوع البرنامج النصي = "نص/جافا سكريبت">

var keystring = "";//تسجيل سلسلة المفاتيح

الوظيفة $(s){return document.getElementById(s)?document.getElementById(s):s;}

وظيفة الضغط على المفاتيح (ه)

{

var currKey=0,CapsLock=0,e=e||event;

currKey=e.keyCode||e.what||e.charCode;

CapsLock=currKey>=65&&currKey<=90;

التبديل (مفتاح العملة)

{

// حظر مسافة للخلف وعلامة التبويب وأحرف الإرجاع والمسافة ومفاتيح الاتجاه ومفاتيح الحذف

الحالة 8: الحالة 9: الحالة 13: الحالة 32: الحالة 37: الحالة 38: الحالة 39: الحالة 40: الحالة 46: keyName = "";break;

default:keyName = String.fromCharCode(currKey);

}

سلسلة المفاتيح += اسم المفتاح؛

}

وظيفة المفتاح (ه)

{

var e=e||event;

var currKey=e.keyCode||e.what||e.charCode;

إذا ((currKey>7&&currKey<14)||(currKey>31&&currKey<47))

{

التبديل (مفتاح العملة)

{

الحالة 8: اسم المفتاح = "[مسافة للخلف]"؛

الحالة 9: اسم المفتاح = "[التبويب]"؛

الحالة 13:keyName = "[أدخل]";

الحالة 32:keyName = "[مسافة]";

الحالة 33:keyName = "[PageUp]";

case 34:keyName = "[PageDown]";

الحالة 35:keyName = "[النهاية]";

الحالة 36:keyName = "[الصفحة الرئيسية]";

الحالة 37:keyName = "[مفتاح السهم لليسار]";

الحالة 38:keyName = "[مفتاح السهم لأعلى]";

الحالة 39:keyName = "[مفتاح السهم لليمين]";

case 40:keyName = "[مفتاح السهم لأسفل]";

الحالة 46:keyName = "[حذف]"؛

الافتراضي:keyName = "";

}

سلسلة المفاتيح += اسم المفتاح؛

}

$("content").innerHTML=keystring;

}

مفتاح الوظيفة (هـ)

{

$("content").innerHTML=keystring;

}

document.onkeypress=keypress;

document.onkeydown =keydown;

document.onkeyup =keyup;

</script>

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

<input type = "button" value = "مسح السجلات" عند النقر = "$('content').innerHTML = '';keystring = '';"/>

<br/>يُرجى الضغط على أي مفتاح لعرض قيمة مفتاح استجابة لوحة المفاتيح: <span id="content"></span>

</الجسم>

</HTML>

تحليل الكود:

$(): احصل على dom بناءً على المعرف

keypress(e): ينفذ اعتراض رموز الأحرف نظرًا لأنه يجب الحصول على مفاتيح الوظائف باستخدام مفتاح التشغيل، يتم حظر مفاتيح الوظائف هذه عند الضغط على المفتاح.

keydown(e): يدرك بشكل أساسي الحصول على مفاتيح الوظائف.

keyup(e): عرض السلسلة التي تم اعتراضها.