رویداد ( ) focusin در jQuery :
رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد . عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد . دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را به دست آورد و نه خود عنصر . بدیهی است این رویداد در مورد تگ هایی که عنصر فرزند ندارند ، اجرا نمی شود .
برای مثال فرض کنید که یک تگ < div > طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متین درون آن ، فوکوس برنامه را به دست آورد ، این رویداد اتفاق می افتد .
شکل کلی استفاده از این متد به شرح زیر است :
| Syntax | $ ( " selector " ).focusin ( function ( ) { ... some code ... } ; |
| syntax توضیح | |
| توضیح | Parameter |
| selector کنترل یا عنصری است که یک عنصر فرزند آن فوکوس برنامه را به دست می آورد . | selector |
| این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . | function ( ) |
| Example | $ ( " #div_1 " ).focusin ( function ( ) { ... some code } ; |
در چند مثال سعی می کنیم تا استفاده از رویداد focusin را در عمل به شما نمایش دهیم .
مثال : در مثال اول یک تگ < div > داریم که دو عدد کادر متن به عنوان عنصر فرزند در درون آن قرار گرفته است . کدی طراحی کرده ایم که با اجرای آن ، در هنگامی که یکی از کادرهای متن کنترل فوکوس برنامه را به دست آورد ، رنگ پس زمینه کنترل مادر یعنی تگ < div > تغییر می کند . برای مشاهده خروجی هر کدام از کادر های متن را انتخاب کنید :
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" #div_1 ") . focusin ( function( ){ $ ( this ) . css( " background-color " , " Gray " ); }); }); </script> </head> <body> <div id="div_1" style="border: 1px solid black ; padding : 10px" > Name : < input type="text" id="Text1" size="10" /> Family : < input type="text" id="Text2" size="10" /> < div > </body> </html> |
|
مثال 2 : در مثال دوم همان مثال اول را تکرار کرده ایم با این تفاوت که در این مورد ، با بدست آوردن فوکوس برنامه توسط هر یک از کادر های متن ، فونت نوشته عنصر مادر یعنی تگ div به صورت bold در می آید .
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" #div_2 ") . focusin ( function( ){ $ ( this ) . css( " font-weight " , " bold " ); }); }); </script> </head> <body> <div id="div_2" style="border: 1px solid black ; padding : 10px" > Name : < input type="text" id="Text3" size="10" /> Family : < input type="text" id="Text4" size="10" /> < div > </body> </html> |
|
