در چند نسخه گذشته کروم دو افزوده به KeyboardEvent s دیده شده است که به عنوان پارامتری به شنوندگان رویداد keydown ، keypress و keyup ارسال می‌شوند. هم ویژگی code (افزوده شده در Chrome 48 ) و هم ویژگی key (افزوده شده در Chrome 51 ) به توسعه دهندگان راه ساده ای برای دریافت اطلاعاتی می دهد که در غیر این صورت استفاده از ویژگی های قدیمی دشوار خواهد بود.
ویژگی کد
ابتدا ویژگی code است. این به رشته‌ای تنظیم می‌شود که نشان‌دهنده کلیدی است که برای ایجاد KeyboardEvent فشار داده شده است، بدون در نظر گرفتن طرح‌بندی صفحه‌کلید فعلی (مثلاً QWERTY در مقابل Dvorak )، محلی (مثلاً انگلیسی در مقابل فرانسوی)، یا هر کلید اصلاح‌کننده‌ای. . این زمانی مفید است که برای شما مهم است که کدام کلید فیزیکی فشار داده شده است، نه اینکه با کدام کاراکتر مطابقت دارد. به عنوان مثال، اگر در حال نوشتن یک بازی هستید، ممکن است بخواهید مجموعه خاصی از کلیدها را برای حرکت دادن بازیکن در جهات مختلف بخواهید، و این نقشه برداری باید مستقل از چیدمان صفحه کلید باشد.
ویژگی کلیدی
بعد، ویژگی key جدید را داریم. همچنین روی یک رشته تنظیم شده است، اما در حالی که code اطلاعات مربوط به کلید فیزیکی فشار داده شده را برمی گرداند، key حاوی کاراکتری است که توسط آن کلید تولید می شود، با در نظر گرفتن طرح بندی فعلی صفحه کلید، محلی و کلیدهای اصلاح کننده. نگاه کردن به مقدار مشخصه key زمانی مفید است که باید بدانید چه کاراکتری بر روی صفحه نمایش داده می شود، گویی کاربر در ورودی متنی تایپ کرده است.
این در عمل به چه معناست؟
برای ارائه یک مثال ملموس، فرض کنید کاربر شما از صفحه کلید ایالات متحده با طرح صفحه کلید QWERTY استفاده می کند. با فشار دادن کلید فیزیکی Q روی آن صفحه کلید، یک KeyboardEvent با ویژگی code تنظیم شده روی "KeyQ" ایجاد می شود. این بدون در نظر گرفتن طرح‌بندی صفحه‌کلید، و صرف‌نظر از هر کلید اصلاح‌کننده دیگری صادق است. برای مقایسه، در یک صفحه کلید فرانسوی ( AZERTY ) این کلید همچنان دارای code "KeyQ" است، حتی اگر حرف چاپ شده روی کلاهک کلید "a" باشد. با فشار دادن کلید فیزیکی Q در همان صفحه کلید ایالات متحده، معمولاً یک KeyboardEvent با key تنظیم شده روی "q" (بدون کلیدهای اصلاح کننده)، یا "Q" (با Shift یا CapsLock) یا "œ" (در OS X، با Alt). در یک صفحه کلید فرانسوی AZERTY، همین کلید یک "a" (یا "A" با Shift یا CapsLock) ایجاد می کند. و برای دیگر طرح‌بندی‌های صفحه‌کلید، مقدار key می‌تواند "й" ، "ض" ، "ㅂ" ، "た" یا کاراکتر دیگری باشد. با بررسی مجدد مثال بازی قبلی، اگر می‌خواهید بازی شما از کلیدهای WASD برای حرکت استفاده کند، می‌توانید از ویژگی code استفاده کنید و "KeyW" ، "KeyA" ، "KeyS" و "KeyD" را بررسی کنید. این برای همه صفحه‌کلیدها و همه طرح‌بندی‌ها کار می‌کند - حتی صفحه‌کلیدهای AZERTY که موقعیت کلیدهای "w" و "z" را عوض می‌کنند.
کیبوردهای مجازی
متوجه خواهید شد که تا کنون، ما بر روی رفتار با فرض یک صفحه کلید فیزیکی تمرکز کرده‌ایم. در مورد کاربرانی که روی صفحه کلید مجازی یا یک دستگاه ورودی جایگزین تایپ می کنند چطور؟ مشخصات، راهنمایی رسمی برای ویژگی code ارائه می دهد. به طور خلاصه، انتظار می‌رود صفحه‌کلید مجازی که طرح‌بندی یک صفحه‌کلید استاندارد را تقلید می‌کند، منجر به تنظیم ویژگی code مناسب شود، اما صفحه‌کلیدهای مجازی که از طرح‌بندی‌های غیر سنتی استفاده می‌کنند ممکن است منجر به تنظیم نشدن code شوند.
همه چیز برای ویژگی key ساده تر است، که باید انتظار داشته باشید که بر اساس کاراکتری که کاربر (به طور مجازی) تایپ کرده است، روی رشته ای تنظیم شود.
آن را امتحان کنید
گری کاچمارچیک یک نسخه ی نمایشی فوق العاده برای تجسم تمام ویژگی های مرتبط با KeyboardEvent s گردآوری کرده است:
پشتیبانی از مرورگرهای متقابل
پشتیبانی از ویژگی code ، تا زمان نگارش این مقاله، محدود به Chrome 48+، Opera 35+ و Firefox 44+ است. ویژگی key در Firefox 44+، Chrome 51+، و Opera 38+، با پشتیبانی جزئی در Internet Explorer 9+ و Edge 13+ پشتیبانی می‌شود.