الفرق بين المراجعتين لصفحة: «jQuery/focus»
Khaled-yassin (نقاش | مساهمات) |
لا ملخص تعديل |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 6: | سطر 6: | ||
=== الوصف === | === الوصف === | ||
ربط دالة معالج أحداث بحدث "focus" من JavaScript، أو إطلاق هذا الحدث على عنصر. | ربط دالة معالج أحداث بحدث <code>"focus"</code> من JavaScript، أو إطلاق هذا الحدث على عنصر. | ||
=== <code>.focus( handler )</code> === | === <code>.focus( handler )</code> === | ||
| سطر 12: | سطر 12: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
دالة على الشكل Function( Event eventObject ) | دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، تُنفَّذ في كل مرة يُطلَق فيها الحدث. | ||
=== <code>.focus( [eventData ], handler )</code> === | === <code>.focus( [eventData ], handler )</code> === | ||
| سطر 21: | سطر 21: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
دالة على الشكل Function( Event eventObject ) | دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، تُنفَّذ في كل مرة يُطلَق فيها الحدث. | ||
=== <code>.focus()</code> === | === <code>.focus()</code> === | ||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | ||
لا يقبل هذا | لا يقبل هذا hالشكل أي وسائط. | ||
يُعد هذا التابع اختصارًا للتابع <code>[[jQuery/deferred/fail|.on( "focus", handler )]]</code> في صورته الأولى والثانية، والتابع <code>[[jQuery/trigger|.trigger( "focus" )]]</code> في صورته الثالثة. | يُعد هذا التابع اختصارًا للتابع <code>[[jQuery/deferred/fail|.on( "focus", handler )]]</code> في صورته الأولى والثانية، والتابع <code>[[jQuery/trigger|.trigger( "focus" )]]</code> في صورته الثالثة. | ||
يُرسَل الحدث <code>focus</code> إلى عنصر عند التركيز عليه. ينطبق هذا الحدث ضمنيًا على مجموعة محدودة من العناصر، مثل عناصر الاستمارة (<code>[[HTML/select|<select>]]</code> و <code>[[HTML/input|<input>]]</code> | يُرسَل الحدث <code>focus</code> إلى عنصر عند التركيز عليه. ينطبق هذا الحدث ضمنيًا على مجموعة محدودة من العناصر، مثل عناصر الاستمارة (<code>[[HTML/select|<select>]]</code> و <code>[[HTML/input|<input>]]</code> ...إلخ.) والروابط (<code><a></code><code></code><code></code>). في إصدارات المتصفحات الحديثة، يمكن توسيع الحدث ليشمل جميع أنواع العناصر عن طريق ضبط خاصية <code>tabindex</code> للعنصر بشكل صريح. يمكن لعنصر الحصول على التركيز عبر أوامر لوحة المفاتيح، مثل مفتاح علامة التبويب، أو عن طريق النقر بالفأرة على العنصر. | ||
يتم تمييز العناصر التي يُركَّز عليها عادةً بطريقة ما بواسطة المتصفح، على سبيل المثال باستخدام خط منقط يحيط بالعنصر. يستخدم التركيز لتحديد العنصر الذي يتلقى الأحداث المتعلقة بلوحة المفاتيح أولًا. | يتم تمييز العناصر التي يُركَّز عليها عادةً بطريقة ما بواسطة المتصفح، على سبيل المثال باستخدام خط منقط يحيط بالعنصر. يستخدم التركيز لتحديد العنصر الذي يتلقى الأحداث المتعلقة بلوحة المفاتيح أولًا. | ||
| سطر 56: | سطر 56: | ||
</syntaxhighlight>بعد تنفيذ هذه الشيفرة البرمجية، سيؤدي النقر فوق <code>Trigger the handler</code> أيضًا إلى تنبيه الرسالة. | </syntaxhighlight>بعد تنفيذ هذه الشيفرة البرمجية، سيؤدي النقر فوق <code>Trigger the handler</code> أيضًا إلى تنبيه الرسالة. | ||
لا | لا ينتج حدث <code>focus</code> فقاعات في Internet Explorer. لذلك، لن تعمل السكريبتات التي تعتمد على تفويض الحدث مع الحدث focus بشكل متسق عبر المتصفحات. ولكن بدءًا من الإصدار 1.4.2، يعمل jQuery لتجنب هذا التحديد عن طريق استبدال <code>focus</code> بحدث <code>focusin</code> في توابع تفويض الحدث <code>[[jQuery/live|.live()]]</code> و <code>[[jQuery/delegate|.delegate()]]</code>. | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
لمّا كان التابع <code>.focus()</code> هو مجرد اختصار للتابع <code>[[jQuery/on|.on( "focus", handler )]]</code>، فإن فك ارتباط دالة معالجة الحدث هو أمرٌ ممكن باستخدام <code>[[jQuery/off|.off( "focus" )]]</code>. | |||
=== أمثلة === | === أمثلة === | ||
إضافة دالة لمعالجة الحدث <code>focus</code>:<syntaxhighlight lang="html"> | |||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 92: | سطر 92: | ||
$( this ).blur(); | $( this ).blur(); | ||
}); | }); | ||
</syntaxhighlight>للتركيز على مربع إدخال تسجيل الدخول مع | </syntaxhighlight>للتركيز على مربع إدخال تسجيل الدخول مع المعرف <code>login</code> عند بدء تشغيل الصفحة، جرِّب:<syntaxhighlight lang="jquery"> | ||
$( document ).ready(function() { | $( document ).ready(function() { | ||
$( "#login" ).focus(); | $( "#login" ).focus(); | ||
المراجعة الحالية بتاريخ 10:58، 29 مايو 2018
.focus( handler )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ربط دالة معالج أحداث بحدث "focus" من JavaScript، أو إطلاق هذا الحدث على عنصر.
.focus( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة على الشكل Function( Event eventObject )، تُنفَّذ في كل مرة يُطلَق فيها الحدث.
.focus( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
كائن يحتوي على البيانات التي ستُمرر إلى معالج الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.
handler
دالة على الشكل Function( Event eventObject )، تُنفَّذ في كل مرة يُطلَق فيها الحدث.
.focus()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا hالشكل أي وسائط.
يُعد هذا التابع اختصارًا للتابع .on( "focus", handler ) في صورته الأولى والثانية، والتابع .trigger( "focus" ) في صورته الثالثة.
يُرسَل الحدث focus إلى عنصر عند التركيز عليه. ينطبق هذا الحدث ضمنيًا على مجموعة محدودة من العناصر، مثل عناصر الاستمارة (<select> و <input> ...إلخ.) والروابط (<a>). في إصدارات المتصفحات الحديثة، يمكن توسيع الحدث ليشمل جميع أنواع العناصر عن طريق ضبط خاصية tabindex للعنصر بشكل صريح. يمكن لعنصر الحصول على التركيز عبر أوامر لوحة المفاتيح، مثل مفتاح علامة التبويب، أو عن طريق النقر بالفأرة على العنصر.
يتم تمييز العناصر التي يُركَّز عليها عادةً بطريقة ما بواسطة المتصفح، على سبيل المثال باستخدام خط منقط يحيط بالعنصر. يستخدم التركيز لتحديد العنصر الذي يتلقى الأحداث المتعلقة بلوحة المفاتيح أولًا.
تؤدي محاولة التركيز على عنصر مخفي إلى حدوث خطأ في متصفح Internet Explorer. فاحرص دائمًا على استخدام التابع .focus() على العناصر المرئية. لتشغيل معالجات أحداث التركيز الخاصة بعنصر بدون ضبط التركيز على العنصر، نستخدم التابع .triggerHandler( "focus" ) بدلاً من .focus().
على سبيل المثال، تأمل شيفرة HTML هذه:
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
<div id="other">
Trigger the handler
</div>
يمكن ربط معالج الحدث بحقل الإدخال الأول:
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
الآن بالنقر على الحقل الأول، أو الانتقال إليه باستخدام زر علامة التبويب tab في لوحة المفاتيح من حقل آخر، يعرض التنبيه:
Handler for .focus() called.
يمكننا إطلاق الحدث عند النقر على عنصر آخر:
$( "#other" ).click(function() {
$( "#target" ).focus();
});
بعد تنفيذ هذه الشيفرة البرمجية، سيؤدي النقر فوق Trigger the handler أيضًا إلى تنبيه الرسالة.
لا ينتج حدث focus فقاعات في Internet Explorer. لذلك، لن تعمل السكريبتات التي تعتمد على تفويض الحدث مع الحدث focus بشكل متسق عبر المتصفحات. ولكن بدءًا من الإصدار 1.4.2، يعمل jQuery لتجنب هذا التحديد عن طريق استبدال focus بحدث focusin في توابع تفويض الحدث .live() و .delegate().
ملاحظات إضافية
لمّا كان التابع .focus() هو مجرد اختصار للتابع .on( "focus", handler )، فإن فك ارتباط دالة معالجة الحدث هو أمرٌ ممكن باستخدام .off( "focus" ).
أمثلة
إضافة دالة لمعالجة الحدث focus:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focus demo</title>
<style>
span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><input type="text"> <span>focus fire</span></p>
<p><input type="password"> <span>focus fire</span></p>
<script>
$( "input" ).focus(function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
</script>
</body>
</html>
لمنع الأشخاص من الكتابة في مربعات إدخال النص، جرِّب:
$( "input[type=text]" ).focus(function() {
$( this ).blur();
});
للتركيز على مربع إدخال تسجيل الدخول مع المعرف login عند بدء تشغيل الصفحة، جرِّب:
$( document ).ready(function() {
$( "#login" ).focus();
});