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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۵ خرداد ۱۳۹۷

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

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

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

Username:<input id="username" type="text"><br>
Password: <input id="password" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

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

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

const passwordElement = document.getElementById("password");
const buttonElement = document.getElementById("myButton");
const KEY_ENTER = 13;

passwordElement.onkeyup = event => {
  event.preventDefault();
  if (event.keyCode === KEY_ENTER) {
    buttonElement.click();
  }
};

const buttonCode = () => {
  alert('Button code executed.');
};

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

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

امین فعلی

بسیار آموزش عالی و کاربردی بود

مرادی

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

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

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

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