آموزش طراحی وب

رویداد blur() و focus()

در این جلسه ی آموزشی راجع به رویدادهای ()blur و ()focus و ()focusout صحبت می کنیم .

Jquery

فصل سوم : event ها در جی کوئری

جلسه پنجم  : رویداد  ()blur و ()focus

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

رویداد blur زمانی اتفاق میوفته که یه عنصر از حالت Focus خارج شده باشه .

حالت focus : به حالتی میگن که روی عنصر مورد نظر تمرکز شده باشه ، مثلا یه فیلد متنی داریم که اشاره گر موس توی اون فیلد قرار گرفته و منتظر تایپ محتواست ، به این حالت focus در فیلد متنی میگیم. حالا زمانی که از این حالت خارج بشیم و بخوایم بریم سر یه عنصر دیگه ، به این رویداد blur میگیم .

 

قاعده دستوری ()blur

به شکل زیر شما میتونید از این رویداد استفاده کنید :

 

قاعده دستوری ()focus

به شکل زیر شما میتونید از این رویداد استفاده کنید :

Selector : عنصر مورد نظر ماست که رویدادروی این عنصر اتفاق میوفته  .

Function : در این جا دستوراتی رو لحاظ می کنیم که قراره هنگام رویداد اتفاق بیوفته .

 

حالا برای درک بهتر یک مثال میزنیم :

فرض کنید یه فرم داریم و میخوایم هنگامی که روی فیلدهای متنی focus انجام دادیم کادر دور فیلد به رنگ قرمز دربیاد ، هنگامی که از خالت focus خارج شدیم و رویداد blur اتفاق افتاد رنگ پس زمینه فیلد خاکستری شود .

ابتدا کد html این مثال رو پیاده می کنیم :

یه استایل هم بهش میدیم که یکم شکیل تر بشه :

حالا کد جی کوئری برای حالت focus رو مینویسیم :

در اینجا گفتیم زمانی که focus اتفاق افتاد border عنصر inputیی که روش focus انجام شده به رنگ قرمز تبدیل بشه . در اینجا ما سه عنصر input داریم ، برای اینکه بتونیم input فوکوس شده رو انتخاب کنیم و css رو روش اعمال کنیم باید از this استفاده کنیم . در این کد میگیم inputیی که focus شده رو انتخاب کن و css رو روش پیاده کن .

خوب حالا وقتی دیگه focus روی اینinput  نداریم باید رنگ قرمز border به رنگ قبلی برگرده و رنگ پس زمینه هم به خاکستری تبدیل بشه ، حالا باید از رویداد blur() یا  focusout() استفاده کنیم . هر دو دستور رو من براتون مینویسم :

و یا

هر دو دستور یه کار و انجام میدن ، اما عموما از رویداد blur استفاده میشه . خوب این بود از مثالی که زدیم ، امیدوارم کاملا این رویدادها براتون جا افتاده باشه .

 

دوستان این جلسه ی آموزشی هم به اتمام رسید ، میتونید فایل این پروژه رو دریافت کنید ، خودتون اجرا کنید و مشاهده کنید .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

  • درود

    بسیار آموزش جالبی بود ، آقای همت یار فقط یه چیز ، وقتی مثال رو در مرورگر کروم باز می کنم ، Border جای قرمز بنفش میشه ! توی فایرفاکس و اینترنت اکسپلورر مشکلی نداره و قرمزه ! میشه تستش کنید دوباره

    موفق باشید

    • سلام دوست عزیز
      این به این دلیله که کروم خودش یه border آبی رنگ میندازه دور کادر که با قرمز ادغام میشه و تقریبا بنفش نشون داده میشه .

  • با تشکر از آموزش های خوب شما آقای همت یار من یک راه حل برای مشکل آقای محمودی دارم
    آقای محمودی برای رفع مشکل توی کروم از خاصیت زیر در استایل input استفاده کنید
    outline:none

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین