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



visibility  
mode_comment   ۲

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

در این مطلب قصد دارم ترفندی رو به شما آموزش بدم که زمانی که کاربر در فرم یا یکی از Input ها کلید Enter رو فشار میده، دکمه Submit کلیک بشه و مثل این بمونه که کاربر مستقیما بر روی دکمه کلیک کرده است. این ویژگی خیلی کاربرپسند هست و بیشتر کاربرها از اون استفاده میکنن. پس بهتره که شما هم این ویژگی ها رو درون فرمهای خودتون قرار بدین تا تجربه کاربری بهتری داشته باشید.

فرض کنید که یک فرم ساده بصورت زیر داریم:

همونطور که میبینید دو ورودی که یکی برای نام کاربری و دیگری برای وارد کردن رمز عبور هست قرار داده شده است. در انتخا هم یک کلیک وجود دارد که نقش Submit رو داره و زمانی که بر روی اون کلیک میشه، تابع buttonCode فراخوانی میشه.

کد Javascript برای پیاده سازی این ترفند بصورت زیر هست:

همونطور که میبینید در ابتدا المنت های نام کاربری و رمز عبور رو درون متغیرهای مورد نظر قرار دادیم. کد مربوط به کلید Enter عدد 13 هست و با استفاده از این ویژگی میتونیم بفهمیم که کاربر کلید Enter را فشار داده است.

در انتهای کدهای بالا میبینید که یک تابع ButtonCode قرار داده شده و هر وقت دکمه کلیک بشه، فراخوانی میشه و alert نشون داده میشه.

خب برای پیاده سازی این ترفند همونطور که میبینید برای passwordElement یک Event listener از نوع keyup قرار دادیم. این رویداد زمانی که یک کلید رها بشه فراخوانی میشه. ما در اینجا کد مربوط به کلید رها شده رو با 13 مقایسه میکنیم و اگر برابر بود متوجه میشیم که کاربر Enter رو فشار داده است.

وقتی که مطمئن شدیم که کاربر Enter رو زده، میتونیم متد click برای buttonElement رو فراخوانی کنیم و مثل این میمونه که مستقیما بر روی دکمه مورد نظر کلیک شده است.

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران
مرادی

سلام خیلی عالی بود ممنون

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.