التابع .keypress() في jQuery
.keypress( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث keypress (الضغط على مفتاح في لوحة المفاتيح) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.keypress( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keypress( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keypress()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات.
ملاحظة: لما كان الحدث keypress غير مشمول ضمن المواصفات القياسية، فقد تواجه اختلافًا في السلوك الأساسي عند استعماله باختلاف المتصفحات، وإصدارات المتصفح، والمنصات.
هذا التابع هو اختصار للتابع .on( "keypress", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "keypress" ) في شكله الثالث.
يُرسل الحدث keydown إلى عنصر عندما يسجل المتصفح أية مدخلات من لوحة المفاتيح، وهذا مشابه للحدث keydown باستثناء أن مفاتيح التبديل والمفاتيح غير المطبوعة مثل المفتاح Shift، والمفتاح Esc، والمفتاح delete تستدعي أحداث keydown دون أحداث keypass. قد تظهر أيضًا اختلافات أخرى بين هذين الحدثين بناءً على المنصة والمتصفح المستعمل.
رغم إمكانية ارتباط الحدث keypress مع أي عنصر إلا أنَّه لا يُرسل إلا إلى العنصر الذي استقبل التركيز (focus [المركز عليه حاليًا]). تختلف العناصر التي يمكن التركيز عليها باختلاف المتصفحات ولكن عناصر النماذج <form> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر التي تستعمل بكثرة مع هذا النوع من الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<form>
<fieldset>
<input id="target" type="text" value="Hello there">
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>
يمكن أن يُربط معالج الحدث مع حقل الإدخال:
$( "#target" ).keypress(function() {
console.log( "Handler for .keypress() called." );
});
عندما يصبح الآن مؤشر الإدخال داخل الحقل، فإن الضغط على أي مفتاح سيُظهر التنبيه التالي:
Handler for .keypress() called.
استعمل لاستدعاء الحدث يدويًا التابع .keypress() دون أي معاملات:
$( "#other" ).click(function() {
$( "#target" ).keypress();
});
بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على "Trigger the handler".
إن احتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن document. بسبب توقف انتقال الحدث (bubbling)، فإنَّ جميع ضغطات المفتاح ستسلك طريقها عبر شجرة DOM إلى الكائن document إلا إذا أُوقف هذا السلوك صراحةً.
إن أردت معرفة المفتاح الذي ضُغط، فافحص الكائن event المُمرَّر إلى دالة معالجة الحدث (handler). لما كانت المتصفحات تستعمل خصائص مختلفة لتخزين هذه المعلومات، اعتمدت jQuery على ذلك لتسوية هذه المعضلة بتوفير الخاصية .which، لذا يمكنك استخدامها بكل ثقة لجلب رمز المفتاح المضغوط.
الجدير بالملاحظة أن الحدث keydown والحدث keyup يوفران رمزًا يشير إلى أي مفتاح ضُغط، بينما يشير الرمز الذي يوفره الحدث keypress إلى الحرف الذي أُدخل. سيُشار إلى الحرف "a" الصغير مثلًا بالرمز 65 باستعمال الحدث keydown والحدث keyup، بينما سيُشار إليه بالرمز 97 باستعمال الحدث keypress؛ سيُشار إلى الحرف "A" الكبير بالرمز 65 باستعمال جميع الأحداث. بناءً على هذا الاختلاف، إن كنت تريد معرفة المفتاح المضغوط عمومًا أو مفاتيح مخصصة مثل مفاتيح الأسهم فاستعمل التابع .keydown() أو التابع .keyup() بينما إن كنت تهتم بمعرفة الحرف المضغوط فاستعمل التابع .keypress().
ملاحظات إضافية
لما كان التابع .keypress() اختزالٌ للتابع .on( "keypress", handler )، فمن الممكن استعمال .off( "keypress" ) لإزالة الحدث keypress أي عملية معاكسة لما سبق.
أمثلة
إظهار الكائن event لكل معالج keydown عند الضغط على أي مفتاح في حقل الإدخال <input>:
(ملاحظة: تعتمد التجربة الحية لهذا المثال على الإضافة $.preint() البسيطة [https://api.jquery.com/resources/events.js] من أجل مخرجات الكائن للحدث).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keypress 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 src="/resources/events.js"></script>
<script>
var xTriggered = 0;
$( "#target" ).keypress(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
});
$( "#other" ).click(function() {
$( "#target" ).keypress();
});
</script>
</body>
</html>