رويدادهای صفحه کلید در HTML چیست؟
⌨️آشنایی با رویدادهای صفحه کلید
رویدادهای صفحه کلید در HTML به توسعه دهندگان امکان می دهند واکنش صفحه را به فشردن یا رها کردن کلیدها مدیریت کنند. این رویدادها معمولا در کنار JavaScript به کار می روند تا فرم ها، کادرهای جستجو، بازی های مرورگری و ابزارهای تعاملی رفتار مناسبی داشته باشند. HTML به تنهایی رویداد را تعریف نمی کند؛ مرورگر رویداد را هنگام کار کاربر با صفحه ایجاد می کند و کد JavaScript می تواند آن را دریافت و پردازش کند.
🔎دامنه کاربرد این رویدادها
رويدادهای صفحه کليد در HTML در کنترل های base، br، frame،
frameset،
head، html، iframe، meta، param، script، style و title کاربرد مستقیمی ندارند. این رویدادها زمانی مفید هستند که کاربر بتواند روی یک عنصر قابل تعامل مانند ورودی متن، دکمه یا بخش دارای تمرکز صفحه کلید کار کند. برای اطلاعات بیشتر درباره
رويدادهای صفحه کليد در HTML و کاربرد آن ها، نوع عنصر و وضعیت تمرکز آن را در نظر بگیرید.
انواع رویدادهای صفحه کلید در HTML
📋رویدادهای اصلی صفحه کلید
رویدادهای صفحه کلید در HTML شامل چند رویداد شناخته شده هستند. سه نام رایج در آموزش های قدیمی onkeydown، onkeypress و onkeyup است؛ با این حال، تفاوت پشتیبانی و وضعیت استاندارد بودن آن ها مهم است. امروزه برای بیشتر کاربردها، رویدادهای keydown و keyup انتخاب های اصلی به شمار می روند و رویداد keypress منسوخ شده است.
| رویداد |
زمان اجرا |
نکته کاربردی |
| keydown |
هنگامی که کلید فشرده می شود. |
برای میانبرها، کنترل بازی یا واکنش فوری مناسب است. |
| keypress |
در برخی مرورگرها هنگام فشردن کلیدهای تولیدکننده نویسه اجرا می شد. |
منسوخ شده است؛ برای پروژه های جدید از آن استفاده نکنید. |
| keyup |
هنگامی که کلید فشرده شده رها می شود. |
برای تشخیص پایان فشردن کلید و به روزرسانی وضعیت کاربرد دارد. |
⭐نکته درباره onkeypress
در نمونه های قدیمی ممکن است نام onkeypress را ببینید. این رویداد در استانداردهای جدید منسوخ شده و رفتار آن برای کلیدهای مختلف یکسان نیست؛ برای مثال، کلیدهای جهت دار یا کلیدهای عملکردی لزوما مانند حروف رفتار نمی کنند. به همین دلیل بهتر است برای دریافت ورودی صفحه کلید از keydown یا input، متناسب با نیاز، استفاده کنید.
تفاوت keydown، keyup و keypress
🟢ترتیب رخ دادن رویدادها
در حالت معمول، با فشردن یک کلید ابتدا keydown رخ می دهد و با رها کردن آن keyup اجرا می شود. اگر کاربر کلید را نگه دارد، مرورگر ممکن است keydown را چند بار تکرار کند؛ بنابراین نباید فرض کرد که هر بار اجرای این رویداد به معنای فشردن تازه کلید است. رویداد keyup معمولا برای زمانی مناسب است که لازم دارید بدانید کاربر دیگر کلید را نگه نداشته است.
🧭انتخاب رویداد متناسب با کار
برای اجرای فوری میانبرهای صفحه کلید معمولا keydown انتخاب مناسبی است. اگر اجرای کد باید پس از رها شدن کلید انجام شود، keyup را در نظر بگیرید. اما اگر هدف شما خواندن مقدار تازه یک ورودی متنی است، رویداد input اغلب انتخاب دقیق تری است؛ زیرا تغییر مقدار را دنبال می کند و فقط به صفحه کلید محدود نیست. کاربر ممکن است متن را با ماوس، صفحه لمسی یا ابزارهای کمکی نیز وارد کند.
ویژگی های key و code در رویداد صفحه کلید
🔤مقدار key
شیء رویداد اطلاعاتی درباره کلید در اختیار برنامه قرار می دهد. ویژگی key معمولا مقدار یا معنای کلید را نشان می دهد؛ برای نمونه، فشردن کلید حرفی می تواند نویسه مربوط به آن را برگرداند و کلیدهایی مانند Enter یا Escape نام مشخص خود را دارند. این ویژگی با زبان و چیدمان فعال صفحه کلید ارتباط دارد و برای تشخیص چیزی که کاربر وارد می کند مفید است.
🧩مقدار code
ویژگی code محل فیزیکی کلید را بر اساس چیدمان استاندارد صفحه کلید توصیف می کند. این مقدار در ساخت بازی یا کنترل هایی که به جای نویسه، به موقعیت کلید وابسته هستند کاربرد دارد. برای مثال، برنامه ای که حرکت شخصیت را با محل کلیدهای جهت دار یا مجموعه ای از کلیدهای حرکتی کنترل می کند، ممکن است به code نیاز داشته باشد. تصمیم بین key و code به هدف برنامه وابسته است.
💡کلیدهای ترکیبی و تکرار
در رویدادهای صفحه کلید می توانید وضعیت کلیدهای کمکی مانند Ctrl، Shift، Alt و Meta را با ویژگی های مربوط به رویداد بررسی کنید. ویژگی repeat نیز نشان می دهد که رویداد در اثر نگه داشتن کلید تکرار شده است یا خیر. این اطلاعات برای میانبرها، پیمایش در صفحه و تعامل های مبتنی بر صفحه کلید کاربرد دارند؛ با این حال، میانبرها نباید عملکرد اصلی صفحه را برای کاربران مختل کنند.
نمونه کد استفاده از رویدادهای صفحه کلید
💻شنیدن رویداد keydown
در این نمونه، شنونده رویداد به یک کادر ورودی متصل می شود. هنگامی که کاربر کلیدی را در همان کادر فشار می دهد، مقدار ویژگی key در کنسول مرورگر نمایش داده می شود. استفاده از addEventListener به جای نوشتن کد درون ویژگی HTML، جداسازی ساختار صفحه از رفتار JavaScript را آسان تر می کند.
<input id="search" type="text" placeholder="عبارت را وارد کنید">
<script>
const searchInput = document.querySelector("#search");
searchInput.addEventListener("keydown", function (event) {
console.log("کلید فشرده شده:", event.key);
});
</script>
✅تشخیص فشردن Enter
در بسیاری از فرم ها لازم است با فشردن Enter، عملیات جستجو یا ثبت انجام شود. بهتر است رفتار فرم تا حد امکان با ساختار استاندارد HTML هماهنگ باشد و دکمه ارسال واقعی داشته باشد. اگر نیاز ویژه ای دارید، می توانید مقدار key را بررسی کنید؛ در عین حال باید از اجرای ناخواسته عملیات در ورودی های دیگر جلوگیری شود.
const searchInput = document.querySelector("#search");
searchInput.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
console.log("جستجو انجام شود");
}
});
⚠️پیشگیری از ارسال دوباره فرم
اگر فرم به صورت پیش فرض با Enter ارسال می شود، افزودن شنونده keydown بدون بررسی رفتار استاندارد می تواند باعث ارسال دوباره یا تداخل شود. پیش از اجرای عملیات، بررسی کنید که عنصر فعال همان ورودی مورد نظر است و رویداد در جای مناسب مدیریت می شود. استفاده از رویداد submit روی خود فرم نیز در بسیاری از موارد راهکار ساده تر و قابل دسترس تری است.
محدود کردن رویداد به عنصر مناسب
🎯انتخاب محل ثبت شنونده
می توانید شنونده صفحه کلید را روی یک ورودی، یک دکمه، یک بخش دارای tabindex یا کل سند ثبت کنید. ثبت روی عنصر مشخص معمولا از اجرای ناخواسته کد در بخش های دیگر جلوگیری می کند. ثبت روی document برای میانبرهای سراسری کاربرد دارد، اما لازم است رفتار فیلدهای متنی، منوها و کنترل های تعاملی را هم در نظر بگیرید تا میانبر صفحه مانع کار معمول کاربر نشود.
🛠️جلوگیری از رفتار پیش فرض
در بعضی موارد لازم است رفتار پیش فرض مرورگر متوقف شود؛ برای نمونه، برنامه ممکن است بخواهد جلوی یک میانبر مشخص را بگیرد. متد preventDefault فقط زمانی باید فراخوانی شود که دلیل روشنی وجود دارد. استفاده بی رویه از آن می تواند پیمایش صفحه، کار با فرم یا دسترسی به قابلیت های مرورگر را برای کاربر دشوار کند. همچنین این متد انتشار رویداد به عناصر والد را متوقف نمی کند؛ این کار با stopPropagation انجام می شود.
دسترسی پذیری و نکات مهم در استفاده
1
از عناصر استاندارد استفاده کنید: دکمه ها، پیوندها و فیلدهای فرم در مرورگر رفتار صفحه کلید قابل پیش بینی دارند. به جای تبدیل یک عنصر غیرتعاملی به کنترل، از عنصر HTML مناسب استفاده کنید تا کاربران صفحه کلید و فناوری های کمکی بتوانند با صفحه کار کنند.
2
تمرکز قابل مشاهده را حفظ کنید: کاربر باید بتواند تشخیص دهد در حال حاضر کدام بخش صفحه فعال است. هنگام طراحی تعامل های صفحه کلید، نشانگر focus را حذف نکنید مگر آن که جایگزینی روشن و قابل مشاهده فراهم کرده باشید.
3
میانبرهای قابل فهم بسازید: میانبرها نباید با قابلیت های رایج مرورگر یا نرم افزارهای کمکی تداخل داشته باشند. اگر میانبری اضافه می کنید، راهی برای توضیح، تغییر یا غیرفعال کردن آن در اختیار کاربر قرار دهید.
4
روی دستگاه های مختلف آزمایش کنید: صفحه کلیدها، چیدمان زبان ها و مرورگرها ممکن است با یکدیگر تفاوت داشته باشند. برنامه را با زبان فارسی، زبان های دیگر، صفحه کلید فیزیکی و روش های ورودی مختلف آزمایش کنید.
5
از رویداد مناسب استفاده کنید: برای تغییر مقدار ورودی، input معمولا روشن تر و دقیق تر از keydown است. برای تشخیص کلیدهای کنترلی یا ساخت میانبر، رویدادهای صفحه کلید انتخاب مناسب تری هستند. انتخاب درست باعث ساده تر شدن کد و کاهش رفتارهای ناخواسته می شود.
اشتباه های رایج در رویدادهای صفحه کلید
🚫تکیه بر رویداد منسوخ شده
استفاده از keypress در کدهای جدید می تواند باعث ناسازگاری و رفتار پیش بینی ناپذیر شود. بهتر است نیاز خود را مشخص کنید و برای تشخیص کلیدها از keydown یا keyup و برای دریافت تغییر متن از input استفاده کنید. همچنین بررسی کنید که راهکار انتخاب شده با مرورگرهای مورد پشتیبانی پروژه هماهنگ باشد.
🧯فرض کردن چیدمان ثابت صفحه کلید
اگر برنامه برای دریافت نویسه از code استفاده کند، ممکن است با تغییر زبان یا چیدمان صفحه کلید نتیجه مورد انتظار را نگیرد. در مقابل، اگر هدف شناسایی موقعیت فیزیکی کلید در بازی باشد، key ممکن است وابسته به زبان کاربر باشد. بنابراین، پیش از انتخاب ویژگی رویداد، روشن کنید که برنامه به معنای ورودی نیاز دارد یا به جایگاه کلید.
🧪نادیده گرفتن عنصر فعال
شنونده سراسری ممکن است وقتی کاربر در حال نوشتن متن است نیز میانبر را اجرا کند. در کاربردهای حساس، عنصر فعال و نوع آن را بررسی کنید و رفتار میانبر را با وضعیت صفحه هماهنگ سازید. این توجه از پاک شدن ناخواسته متن یا اجرای عملیاتی که کاربر انتظار آن را ندارد جلوگیری می کند.
جمع بندی رویدادهای صفحه کلید در HTML
✅خلاصه کاربردی
رویدادهای صفحه کلید در HTML راهی برای واکنش به تعامل کاربر با کلیدها هستند و معمولا با JavaScript مدیریت می شوند. برای فشردن کلید از keydown و برای رها کردن آن از keyup استفاده کنید؛ از keypress در پروژه های تازه دوری کنید و هنگام خواندن متن ورودی، رویداد input را نیز در نظر بگیرید. انتخاب درست رویداد، بررسی ویژگی های key و code و توجه به دسترسی پذیری، تجربه ای قابل اعتمادتر برای کاربران می سازد. این اصول در ساخت فرم ها، ابزارهای تعاملی و پروژه های
طراحی سایت کاربرد دارند.
سوالات متداول رویدادهای صفحه کلید در HTML
تفاوت رویداد keydown و keyup چیست؟
رویداد keydown هنگام فشردن کلید اجرا می شود و keyup هنگام رها کردن کلید. اگر کلید برای مدتی نگه داشته شود، ممکن است keydown چند بار تکرار شود.
آیا استفاده از onkeypress هنوز پیشنهاد می شود؟
خیر. keypress منسوخ شده است و پشتیبانی و رفتار یکسانی برای همه کلیدها ندارد. در پروژه های جدید برای تشخیص کلید از keydown یا keyup استفاده کنید.
برای تشخیص کلیدی که کاربر فشرده از چه ویژگی استفاده کنیم؟
ویژگی key مقدار یا معنای کلید را گزارش می کند و برای شناسایی نویسه ها و کلیدهایی مانند Enter مناسب است. ویژگی code موقعیت فیزیکی کلید را بیان می کند و در برخی بازی ها و کنترل های وابسته به جای کلید کاربرد دارد.
برای تشخیص تغییر متن ورودی باید از keydown استفاده کرد؟
برای دنبال کردن تغییر مقدار ورودی، رویداد input معمولا انتخاب مناسب تری است؛ چون تغییرات را مستقل از روش ورود متن دریافت می کند. رویدادهای صفحه کلید زمانی مناسب تر هستند که لازم باشد کلیدهای مشخص یا میانبرها را تشخیص دهید.
رویدادهای صفحه کلید را روی چه عناصری می توان ثبت کرد؟
این رویدادها معمولا روی عناصر قابل تعامل و دارای تمرکز مانند ورودی ها، دکمه ها و بخش های قابل تمرکز ثبت می شوند. شنونده سراسری نیز برای میانبرها کاربرد دارد، اما باید از تداخل آن با ورودی فرم ها و رفتار معمول مرورگر جلوگیری کرد.