سبد (0)

رویداد keyCode

مثال (رویداد keyCode)

گرفتن مقدار یونیکد دکمه ی فشار داده شده در روی صفحه کلید:

var x = event.keyCode;

خروجی x در کد بالا:

119   // 119 is the character "w"

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.


تعریف و کاربرد

خصوصیت keyCode، کد کاراکتر یونیکدی که در رویداد onkeypress ایجاد شده است را برمی گرداند. یا اینکه، کد کاراکتر یونیکدی که در رویداد های  onkeydown و  onkeyup ایجاد شده است را برمی گرداند.

تفاوت بین دو نوع کد:

  • کد کاراکتر: یک عدد که یک کاراکتر اسکی(ASCII) را مشخص می کند.
  • کد دکمه: یک عدد که کلید واقعی بر روی صفحه کلید را مشخص می کند.

 دو مفهوم بالا به یک معنی نیستند، بعنوان مثال  w و W بر روی یک دکمه در صفحه کلید قرار دارند، پس کد دکمه ی آنها یکی است، اما کد کاراکتر آنها متفاوت است به عنوان مثال کد کاراکتر w برابر با 119 و کد کاراکتر W برابر با 87 است.

برای فهمیدن اینکه آیا کاربر یک دکمه ی قابل پرینت(مثل کلید a یا 5) را فشار داده است یا نه توصیه می شود از این خصوصیت در کنار رویداد onkeypress استفاده کنید. 

برای فهمیدن اینکه آیا کاربر یک دکمه ی کاربردی(مانند F1 یا caps lock) را فشار داده است یا نه از این خصوصیت در کنار رویداد onkeyup  یا onkeydown استفاده کنید.

 نکته: در فایرفاکس، خصوصیت keyCode در کنار رویداد onkeypress کار نمی کند(فقط 0 را برمی گرداند). به عنوان یک راه حل برای مرورگر می توانید از خصوصیت  which در کنار خصوصیت keyCode استفاده کنید.

var x = event.which || event.keyCode;  //بر اساس پشتیبانی مرورگر از خصوصیت های which یا keyCode استفاده کنید

نکته: برای دیدن یک لیست از کاراکترهای یونیکد Complete Unicode Reference را مطالعه کنید.

نکته: اگر می خواهید که مقدار یونیکد برگشتی را به کاراکتر تبدیل کنید، می توانید از متد  fromCharCode() استفاده کنید.

نکته: این رویداد "فقط خواندنی" است.

نکته: هر دو خصوصیت keyCode و which تنها برای سازگاری مرورگر ها ارائه شده اند. در آخرین ورژن از مشخصات رویداد های DOM، توصیه شده است که به جای این خصوصیت از خصوصیت key استفاده کنید.

 نکته: اگر شما می خواهید بدانید که آیا هنگام روی دادن یک رویداد کلید، دکمه های ALT یا CTRL یا META یا SHIFT  فشار داده شده اند یا نه، از خصوصیت های altKey و ctrlKey و metaKey و shiftKey استفاده کنید. 


پشتیبانی مرورگرها

متد     
keyCode بله بله بله بله بله

نحوه استفاده

event.keyCode

جزئیات تکنیکی

مقدار برگشتی

یک عدد، که مشخص کننده ی کد کاراکتر یونیکد یا کد کلید یونیکد است

DOM Version: DOM Level 2 Events

مثال

مثال - خودتان امتحان کنید

مثال (رویداد keyCode)

استفاده از onkeypress و onkeydown برای نشان دادن تفاوت بین کد کاراکتر و کد دکمه:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">

function uniCharCode(event) {
    var char = event.which || event.keyCode;
    document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}

function uniKeyCode(event) {
    var key = event.keyCode;
    document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

هنگام فشار دادن کلید a در صفحه کلید(بدون استفاده از caps lock) خروجی char و key بصورت زیر خواهد شد:

Unicode CHARACTER code: 97
Unicode KEY code: 65

خودتان امتحان کنید »

مثال (رویداد keyCode)

نشان دادن یک پیام در صورتی که کاربر کلید Escape را فشار دهد:

<input type="text" onkeydown="myFunction(event)">

function myFunction(event) {
    var x = event.keyCode;
    if (x == 27) {  // 27 is the ESC key
        alert ("You pressed the Escape key!");
    }
}

خودتان امتحان کنید »

مثال (رویداد keyCode)

تبدیل یک مقدار یونیکد به یک کاراکتر( این کد ها برای کلید های راهبردی کار نمی کند):

var x = event.keyCode;                // Get the Unicode value
var y = String.fromCharCode(x);       // Convert the value into a character

خودتان امتحان کنید »

آموزش های مرتبط

مرجع مدل DOM در اچ تی ام ال KeyboardEvent key Property

مرجع مدل DOM در اچ تی ام ال KeyboardEvent charCode Property

مرجع مدل DOM در اچ تی ام ال KeyboardEvent which Property


مرجع کلیه رویدادهای JavaScript Reference مرجع کلیه رویدادهای JavaScript


تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه