الفرق بين المراجعتين لصفحة: «jQuery/keyup»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| سطر 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"> | ||
| سطر 47: | سطر 47: | ||
$( "#target" ).keyup(); | $( "#target" ).keyup(); | ||
}); | }); | ||
</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> إلا إذا أُوقف هذا السلوك صراحةً. | ||
| سطر 62: | سطر 62: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>keyup | <title>keyup مثالٌ عن استعمال الحدث</title> | ||
<style> | <style> | ||
fieldset { | fieldset { | ||
| سطر 87: | سطر 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> | ||
المراجعة الحالية بتاريخ 09:53، 4 يونيو 2018
.keyup( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث keyup (الضغط على مفتاح في لوحة المفاتيح) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.keyup( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keyup( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.keyup()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات.
هذا التابع هو اختصار للتابع .on( "keyup", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "keyup" ) في شكله الثالث.
يُرسل الحدث keyup إلى عنصر عندما يحرر المستخدم المفتاح الذي ضغطه من لوحة المفاتيح. رغم امكانية ارتباط الحدث keyup مع أي عنصر إلا أنَّه لا يُرسل إلا إلى العنصر الذي استقبل التركيز (focus [المركز عليه حاليًا]). تختلف العناصر التي يمكن التركيز عليها باختلاف المتصفحات ولكن عناصر النماذج <form> يمكنها دومًا الحصول على التركيز، لذا هي من أهم العناصر التي تستعمل بكثرة مع هذا النوع من الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<form>
<input id="target" type="text" value="مرحبًا يا صديق">
</form>
<div id="other">
استدعِ معالج الحدث
</div>
يمكن أن يُربط معالج الحدث مع حقل الإدخال:
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
عندما يصبح الآن مؤشر الإدخال داخل الحقل، فإن الضغط على أي مفتاح سيُظهر التنبيه التالي:
Handler for .keyup() called.
استعمل لاستدعاء الحدث يدويًا التابع .keyup() دون أي معاملات:
$( "#other" ).click(function() {
$( "#target" ).keyup();
});
بعد تنفيذ هذه الشيفرة، ستظهر الرسالة السابقة بالضغط على "استدعِ معالج الحدث".
إن أحتجت تحسُّس ضغط المفتاح في أي مكان في الصفحة (مثل استعمال مفاتيح اختصار عامة في الصفحة)، فاربط هذا السلوك مع الكائن document. بسبب توقف انتقال الحدث (bubbling)، فإنَّ جميع ضغطات المفتاح ستسلك طريقها عبر شجرة DOM إلى الكائن document إلا إذا أُوقف هذا السلوك صراحةً.
إن أردت معرفة المفتاح الذي ضُغط، فافحص الكائن event المُمرَّر إلى دالة معالجة الحدث (handler). لما كانت المتصفحات تستعمل خصائص مختلفة لتخزين هذه المعلومات، اعتمدت jQuery على ذلك لتسوية هذه المعضلة بتوفير الخاصية .which، لذا يمكنك استخدامها بكل ثقة لجلب رمز المفتاح المضغوط. يتطابق هذا الرمز مع أي مفتاح من لوحة المفاتيح من ضمنها المفاتيح الخاصة مثل الأسهم. يمكنك استعمال التابع .keypress() لمعرفة النص الحقيقي المقابل لرمز المفتاح فهو أفضل الخيارات المتوافرة حاليًا.
ملاحظات إضافية
لما كان التابع .keyup() اختزالٌ للتابع .on( "keyup", handler )، فمن الممكن استعمال .off( "keyup" ) لإزالة الحدث keyup أي عملية معاكسة لما سبق.
أمثلة
إظهار الكائن event لمعالج الحدث keyup (باستعمال الإضافة البسيطة $.print) عند تحرير المفتاح المضغوط ضمن حقل الإدخال:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keyup مثالٌ عن استعمال الحدث</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" ).keyup(function( event ) {
xTriggered++;
var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
}).keydown(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
});
$( "#other").click(function() {
$( "#target" ).keyup();
});
</script>
</body>
</html>