تبلیغات متنی و بنر

رویدادها در jQuery - رویداد focusin

رویداد ( ) 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> 		کد
Name :
Family :
خروجی

مثال 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> 		کد
Name :
Family :
خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : جمع سه + پنج چنده ؟