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



visibility  
mode_comment   ۲

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

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

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

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

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

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

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

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

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

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

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

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

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

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

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

نیاز به لاگین

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