الفرق بين المراجعتين ل"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> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر المرشحة لاستعمالها مع هذا النوع من الحدث. | ||
| سطر 32: | سطر 32: | ||
انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | ||
<form> | <form> | ||
| − | <input id="target" type="text" value=" | + | <input id="target" type="text" value="مرحبًا يا صديق"> |
</form> | </form> | ||
<div id="other"> | <div id="other"> | ||
| − | + | استدعِ الحدث | |
</div> | </div> | ||
| − | |||
</syntaxhighlight>معالج الحدث يمكن أن يُربط مع حقل الإدخال:<syntaxhighlight lang="javascript"> | </syntaxhighlight>معالج الحدث يمكن أن يُربط مع حقل الإدخال:<syntaxhighlight lang="javascript"> | ||
$( "#target" ).keydown(function() { | $( "#target" ).keydown(function() { | ||
| سطر 48: | سطر 47: | ||
$( "#target" ).keydown(); | $( "#target" ).keydown(); | ||
}); | }); | ||
| − | </syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على " | + | </syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على "استدعِ الحدث". |
إن أحتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن <code>[[JavaScript/Document|document]]</code>. بسبب توقف انتقال الأحداث (bubbling)، فإنَّ جميع ضغطات المفتاح ستسلك طريقها عبر شجرة DOM إلى الكائن <code>[[JavaScript/Document|document]]</code> إلا إذا أُوقف هذا السلوك صراحةً. | إن أحتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن <code>[[JavaScript/Document|document]]</code>. بسبب توقف انتقال الأحداث (bubbling)، فإنَّ جميع ضغطات المفتاح ستسلك طريقها عبر شجرة DOM إلى الكائن <code>[[JavaScript/Document|document]]</code> إلا إذا أُوقف هذا السلوك صراحةً. | ||
| سطر 63: | سطر 62: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | <title>keydown | + | <title>keydown مثالٌ عن الحدث</title> |
<style> | <style> | ||
fieldset { | fieldset { | ||
| سطر 88: | سطر 87: | ||
<form> | <form> | ||
<fieldset> | <fieldset> | ||
| − | <label for="target"> | + | <label for="target">اكتب شيئًا</label> |
<input id="target" type="text"> | <input id="target" type="text"> | ||
</fieldset> | </fieldset> | ||
</form> | </form> | ||
<button id="other"> | <button id="other"> | ||
| − | + | استدعِ المعالج | |
</button> | </button> | ||
<script type="text/javascript" src="/resources/events.js"></script> | <script type="text/javascript" src="/resources/events.js"></script> | ||
| سطر 116: | سطر 115: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
| − | * [http://api.jquery.com/keydown/ صفحة التابع .keydown() في توثيق jQuery الرسمي.] | + | * [http://api.jquery.com/keydown/ صفحة التابع .keydown() في توثيق jQuery الرسمي.] |
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
المراجعة الحالية بتاريخ 09:48، 4 يونيو 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="مرحبًا يا صديق">
</form>
<div id="other">
استدعِ الحدث
</div>
معالج الحدث يمكن أن يُربط مع حقل الإدخال:
$( "#target" ).keydown(function() {
alert( "Handler for .keydown() called." );
});
عندما يصبح الآن مؤشر الإدخال داخل الحقل، فإن الضغط على أي مفتاح سيُظهر التنبيه التالي:
Handler for .keydown() called.
استعمل لاستدعاء الحدث يدويًا التابع .keydown() دون أي معاملات:
$( "#other" ).click(function() {
$( "#target" ).keydown();
});
بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على "استدعِ الحدث".
إن أحتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن 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 مثالٌ عن الحدث</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">اكتب شيئًا</label>
<input id="target" type="text">
</fieldset>
</form>
<button id="other">
استدعِ المعالج
</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>