تخفیف ویژه

نحوه focus کردن بر روی یک المنت فرم با Javascript

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

نحوه focus کردن بر روی یک المنت فرم با Javascript

در این مطلب میخوایم یاد بگیریم که چطور میتونیم با استفاده از javascript بر روی یکی از المنتهای فرم focus رو قرار دادیم و کاربر بتونه در اونجا چیزی رو وارد کنه. فرض کنید که یک input متنی بصورت زیر داریم:

<input type="text" id="mytext"/>

میبینید که برای اون یک id مشخص کردیم. حالا میتونیم با استفاده از javascript به این المنت دسترسی داشته باشیم و focus رو بر روی اون قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:

function setFocusToTextBox(id){
    document.getElementById(id).focus();
}

setFocusToTextBox("mytext");

میبینید که یک تابع بنام setFocusToTextBox تعریف کردیم و این تابع یک id میگیره و در ابتدا اون رو با استفاده از getElementById پیدا میکنه و با استفاده از متد focus، تمرکز رو بر روی اون input قرار میده. به همین راحتی.

روشی که در بالا گفته شد برای زمانی هست که شما یک input دارید و بعد از لود شدن صفحه و زمان مورد نظرتون میخواید focus رو بر روی اون قرار بدین. اما اگر بخواید همون لحظه اول که صفحه لود میشه، focus بر روی یک input قرار بگیره، میتونین از ویژگی autoFocus که در HTML5 اضافه شده استفاده کنید. بصورت زیر:

<input name="myinput" value="whatever" autofocus />

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

پشتیبانی مرورگرها از autoFocus خوب هست و IE10 به بالا نیز اون رو Support میکنن. میتونین این ویژگی رو در سایت CanIUse مشاهده کنید.

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

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

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

اولین دیدگاه این پست رو تو بنویس !

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