کنترل رویداد های کیبورد در javascript تا تجربه کاربری(UX)

استفاده از کلید‌های میانبر در یک صفحه ی وب میتواند باعث میشود تا کاربر حس کار در سیستم عامل را داشته باشد و این امر موجب میشود تا کاربر تجربه ی کاربری(UX) خوبی از این صفحه داشته باشه و این تجربه خوب باعث میشه تا کاربر دفعات دیگر نیز به صفحه ما سر بزنه.

برای مثال اگه با فیسبوک کار کرده باشید میبینید که در قسمت سرچ بعد از فشردن دکمه‌های کیبورد نتایج مربوط به متن تایپ شده برگردانده میشه و شما میتونید با دکمه‌های بالا و پایین کیبورد آیتم هارو به صورت active در بیارید و سپس در آخر هم با زدن دکمه Enter به لینک آیتم مورد نظر هدایت میشید. این یعنی یک تجربه کاربری عالی!

خب بریم سراغ کنترل رویدادهای کیبورد در جاوا اسکریپت؛ همونطور که میدونید یکی از ویژگی‌های قدرتمند زبان جاوا اسکریپت که باعث شده تا اون رو محبوب کنه رویداد گرا بودن اون هست. در جاوا اسکریپت میتونیم رویداد هایی که اتفاق می‌افتند رو کنترل کنیم و برای اونها شنونده(Listener) قرار دهیم. از جمله رویداد هایی که میشه اونها رو کنترل کرد عبارت است از:  رویداد‌های ماوس که از کلاس  MouseEvent ساخته میشوند، رویداد اسکرول که از کلاس Event ساخته میشود، رویداد‌های کیبورد که شیءای از کلاس KeyboardEvent هستند و رویداد‌های موجود در دوایس‌های لمسی که از کلاس TouchEvent ساخته میشوند.

ما در این مطلب با رویداد‌های کیبورد کار داریم که عبارتند از:

  • [tag]keydown[/tag]: هنگامی رخ میدهد که یکی از دکمه‌های کیبورد فشرده شود.
  • [tag]keypress[/tag]: هنگامی رخ میدهد که یک دکمه حرفی را تایپ کند.
  • [tag]keyup[/tag]:  هنگامی رخ میدهد که دکمه ی فشرده شده رها شود.
[panel type='info' title='']تنها شیء document و فیلد‌های متنی(text inputs) میتوانند برای رویدادهای کیبورد شنونده(Listener) داشته باشند.[/panel]

برای کنترل رویدادها ابتدا باید برای آنها شنونده ایجاد کنیم.

document.addEventListener('keyup', function(event){
});
document.onkeyup = function(event){
};
// in jQuery
$(document).on('keyup', function(event){
});

همونطور که در کد بالا میبینید به روش‌های مختلف برای رویداد keyup یک تابع شنونده درست کردیم که شنونده‌ها یک متغیر میگیرند که در بر دارنده ی رویداد(event) رخ داده میباشد و این event شامل اطلاعات رویداد رخ داده می‌باشد.

اگر می‌خواهید این رویداد رو بهتر بشناسید و با اون کار کنید بهتر است اون رو در کنسول مرورگرتون چاپ کنید.

document.addEventListener('keyup', function(e){
	console.log(e);
});

event

همونطور که میبینید شامل property‌های بالا هست که برخی از اونهارو توضیح میدم.

[tag]altKey[/tag] به فشرده بودن دکمه alt اشاره دارد و [tag]shiftKey[/tag] و [tag]ctrlKey[/tag] هم به همین ترتیب؛ [tag]keyCode[/tag] به عدد یونیکد دکمه فشرده شده اشاره دارد؛ [tag]keyIdentifier[/tag] به یونیکد دکمه فشرده شده اشاره دارد(اگر دکمه‌های کنترلی نظیر shift فشرده شود مقدار این خاصیت برابر با نام دکمه به صورت CamelCase خواهد بود، یعنی “Shift”)؛ [tag]target[/tag] نیز به شیءای اشاره دارد که ما برای آن شنونده قرار دادیم؛ و در آخر [tag]type[/tag] هم نوع رویداد رخ داده را نمایش میدهد.

برای اینکه بتوانیم این رویداد را کنترل کنیم از خاصیت‌های keyCode و altKey، shiftKey و ctrlKey استفاده میکنیم. گاهی اوقات برای اینکه بفهمید مثلا عدد یونیکد Enter چیست باید در کنسول یک شنونده برای یکی از رویداد‌های کیبورد بسازید و سپس اون رو در کنسول چاپ کنید و به خاصیت codeKey نگاه کنید.

[panel type='info' title='']برای بدست آوردن عدد یونیکد یک حرف میتوان از متد charCodeAt در شیء String استفاده کنید. ( charCodeAt in MDN)[/panel]
و در آخر هم بدین صورت برای رویداد‌های کیبورد شنونده میسازیم و آنرا کنترل میکنیم.

document.addEventListener('keyup', function(e){
	e.preventDefault();
	if(e.keyCode == 'Q'.charCodeAt(0)){
		console.log('You press q or Q');
	} else if(e.keyCode == 13){ // 13 is unicode for "Enter" key
		console.log('You press Enter key');
	} else if(e.keyCode == 'P'.charCodeAt(0) && e.altKey == true){
		console.log('You press Alt+P keys');
	} else if(e.keyCode == 'X'.charCodeAt(0) && e.ctrlKey){
		console.log('You press Ctrl+X keys');
	} else if(e.keyCode == 'I'.charCodeAt(0) && e.ctrlKey && e.shiftKey){
		console.log('You press Ctrl+Shift+I keys');
		// do something
	}
});

[remind] خاصیت keyCode عدد یونیکد حرف بزرگ دکمه فشرده شده را برمیگرداند.[/remind]

میتونید کد بالا رو در کنسول مرورگرتون کپی پیست کنید و بعد Enter بزنید تا کد اجرا بشه و بعد هم دکمه هایی که برای اونها کنترل کننده ایجاد کردیم فشار بدید و ببینید آیا کد به درستی کار میکنه یا نه 🙂

فقط یک نکته ای رو اگه بدونید بد نیست؛ متد event.preventDefault (خط دوم کد بالا) باعث میشه که رویداد انجام شده هیچ کاری انجام نده. برای مثال اگر برای رویداد کلیک تگ‌های a یک شنونده ایجاد کنید و متد preventDefault اون event رو اجرا کنید بعد از کلیک بر روی لینک‌ها هیچ کاری انجام نمیشه(به جایی هدایت نمیشید). و همچنین return false نیز همین کار رو انجام میده.

document.links.addEventListener('click', function (ev) {
	ev.preventDefault();
});

و یا به این صورت :

<form action="#" onsubmit="return false;">
	<!-- Some Tags Here -->
</form>

سخن پایانی

طبق آمار‌های گرفته شده در مورد زبان هایی که باید در سال 2015 یاد بگیرید، ، Node.js در جایگاه اول، PHP در جایگاه دوم و جاوا اسکریپت در جایگاه سوم قرار گرفته اند. جمعیت بسیار زیادی به دنبال یادگیری Node.js هستند بنابراین اینکه شما هم به دنبال یادگیری Node.js باشید تعجب آور نیست. اگر شما با javascript آشنا باشید نیمی از راه ساخت وب اپلیکیشن‌ها در Node.js رو پیمودید. البته شاید تا چندین سال آینده هم شاهد مقالات با ارزش در مورد Node.js نباشیم چون مقالات انگلیسی بعد از اینکه چند سال از انتشارشون گذشت به فارسی ترجمه میشن 🙂

موفق باشید.

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲ دیدگاه
Abbas412 ۲۳ دی ۱۳۹۳، ۱۳:۳۰
سلام جناب امینی
ممنون بابت مطلب خوبتون
آماری که انتهای مطلب ذکر کردید، منبعش رو لطف می کنید؟
علی امینی ۲۴ دی ۱۳۹۳، ۰۹:۰۷
سلام
منبع