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

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

رویداد ( ) focusout در jQuery :

رویداد focusout زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را از دست می دهد . عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد  ، هنگامی که عنصر دیگری انتخاب شود عنصر قبلی فوکوس را از دست می دهد. دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را از دست بدهد و نه خود عنصر . بدیهی است این رویداد در مورد تگ هایی که عنصر فرزند ندارند ، اجرا نمی شود . این رویداد عملکردی شبیه رویداد blur دارد .
برای مثال فرض کنید که یک تگ < div > طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متن درون آن ، فوکوس برنامه را از دست می دهند ، این رویداد اتفاق می افتد .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax $ ( " selector " ).focusout ( function ( ) { ... some code ... } ;

syntax توضیح
توضیح Parameter
selector کنترل یا عنصری است که یک عنصر فرزند آن فوکوس برنامه را از دست می دهد . selector
این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . function ( )

Example $ ( " #div_1 " ).focusout ( function ( ) { ... some code } ;

در چند مثال سعی می کنیم تا استفاده از رویداد focusout را در عمل به شما نمایش دهیم .
مثال : در مثال اول یک تگ < div > داریم که دو عدد کادر متن به عنوان عنصر فرزند در درون آن قرار گرفته است . کدی طراحی کرده ایم که با اجرای آن ، در هنگامی که یکی از کادرهای متن کنترل فوکوس برنامه را از دست می دهد ، رنگ پس زمینه کنترل مادر یعنی تگ < div > تغییر می کند . برای مشاهده خروجی هر کدام از کادر های متن را انتخاب کرده و سپس عنصری خارج از تگ div را کلیک کنید :

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" #div_1 ") . focusout ( 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 :
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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