الفرق بين المراجعتين لصفحة: «jQuery/keydown»
جميل-بيلوني (نقاش | مساهمات) إضافة محتويات الصفحة. |
لا ملخص تعديل |
||
| سطر 12: | سطر 12: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
دالة من الشكل <code>[[JavaScript/Function|Function]]( Event eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | ||
=== <code>.keydown( [eventData ], handler )</code> === | === <code>.keydown( [eventData ], handler )</code> === | ||
| سطر 21: | سطر 21: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
دالة من الشكل <code>Function( Event eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | ||
=== <code>.keydown()</code> === | === <code>.keydown()</code> === | ||
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات. | أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات. | ||
هذا التابع هو اختصار للتابع <code>.on( "keydown", handler )</code> في شكله الأول والثاني، واختصار للتابع <code>.trigger( "keydown" )</code> في شكله الثالث. | هذا التابع هو اختصار للتابع <code>.[[jQuery/on|on]]( "keydown", handler )</code> في شكله الأول والثاني، واختصار للتابع <code>.[[jQuery/trigger|trigger]]( "keydown" )</code> في شكله الثالث. | ||
يُرسل الحدث <code>keydown</code> إلى عنصر عندما يضغط المستخدم على أي مفتاح من لوحة المفاتيح. في حال استمرار الضغط على المفتاح، فسيُرسل الحدث في كل مرة يستشعر نظام التشغيل فيها أنَّه ضُغط على المفتاح. رغم امكانية ارتباط الحدث مع أي عنصر إلا أنه لا يُرسل إلا إلى العنصر الذي استقبل التركيز (focus [المركز عليه حاليًا]). تختلف العناصر التي يمكن التركيز عليها باختلاف المتصفحات ولكن عناصر النماذج <code>[[HTML/form|<form>]]</code> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر المرشحة لاستعمالها مع هذا النوع من الحدث. | يُرسل الحدث <code>keydown</code> إلى عنصر عندما يضغط المستخدم على أي مفتاح من لوحة المفاتيح. في حال استمرار الضغط على المفتاح، فسيُرسل الحدث في كل مرة يستشعر نظام التشغيل فيها أنَّه ضُغط على المفتاح. رغم امكانية ارتباط الحدث مع أي عنصر إلا أنه لا يُرسل إلا إلى العنصر الذي استقبل التركيز (focus [المركز عليه حاليًا]). تختلف العناصر التي يمكن التركيز عليها باختلاف المتصفحات ولكن عناصر النماذج <code>[[HTML/form|<form>]]</code> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر المرشحة لاستعمالها مع هذا النوع من الحدث. | ||
| سطر 120: | سطر 120: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/keydown/ صفحة التابع .keydown() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/keydown/ صفحة التابع .keydown() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
مراجعة 07:47، 30 مايو 2018
.keydown( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث keydown (الضغط على مفتاح في لوحة المفاتيح) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.keydown( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keydown( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keydown()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات.
هذا التابع هو اختصار للتابع .on( "keydown", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "keydown" ) في شكله الثالث.
يُرسل الحدث keydown إلى عنصر عندما يضغط المستخدم على أي مفتاح من لوحة المفاتيح. في حال استمرار الضغط على المفتاح، فسيُرسل الحدث في كل مرة يستشعر نظام التشغيل فيها أنَّه ضُغط على المفتاح. رغم امكانية ارتباط الحدث مع أي عنصر إلا أنه لا يُرسل إلا إلى العنصر الذي استقبل التركيز (focus [المركز عليه حاليًا]). تختلف العناصر التي يمكن التركيز عليها باختلاف المتصفحات ولكن عناصر النماذج <form> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر المرشحة لاستعمالها مع هذا النوع من الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<form>
<input id="target" type="text" value="Hello there">
</form>
<div id="other">
Trigger the handler
</div>
معالج الحدث يمكن أن يُربط مع حقل الإدخال:
$( "#target" ).keydown(function() {
alert( "Handler for .keydown() called." );
});
عندما يصبح الآن مؤشر الإدخال داخل الحقل، فإن الضغط على أي مفتاح سيُظهر التنبيه التالي:
Handler for .keydown() called.
استعمل لاستدعاء الحدث يدويًا التابع .keydown() دون أي معاملات:
$( "#other" ).click(function() {
$( "#target" ).keydown();
});
بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على "Trigger the handler".
إن أحتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن document. بسبب توقف انتقال الأحداث (bubbling)، فإنَّ جميع ضغطات المفتاح ستسلك طريقها عبر شجرة DOM إلى الكائن document إلا إذا أُوقف هذا السلوك صراحةً.
إن أردت معرفة المفتاح الذي ضُغط، فافحص الكائن event المُمرَّر إلى دالة معالجة الحدث (handler). لما كانت المتصفحات تستعمل خاصيات مختلفة لتخزين هذه المعلومات، اعتمدت jQuery على ذلك لتسوية هذه المعضلة بتوفير الخاصية .which، لذا يمكنك استخدامها بكل ثقة لجلب رمز المفتاح المضغوط. يتطابق هذا الرمز مع أي مفتاح من لوحة المفاتيح من ضمنها المفاتيح الخاصة مثل الأسهم. يمكنك لمعرفة النص الحقيقي المقابل لرمز ذلك المفتاح استعمال التابع .keypress() فهو أفضل الخيارات المتوافرة حاليًا.
ملاحظات إضافية
لمَّا كان التابع .keydown() اختزالٌ للتابع .on( "keydown", handler )، فمن الممكن استعمال .off( "keydown" ) لإزالة الحدث keydown.
أمثلة
إظهار الكائن event لكل معالج keydown عند الضغط على أي مفتاح في حقل الإدخال:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keydown demo</title>
<style>
fieldset {
margin-bottom: 1em;
}
input {
display: block;
margin-bottom: .25em;
}
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text">
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
var xTriggered = 0;
$( "#target" ).keydown(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
});
$( "#other" ).click(function() {
$( "#target" ).keydown();
});
</script>
</body>
</html>