• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

2 3181 ۲۲ دی ۹۳

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

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

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

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

  • keydown: هنگامی رخ میدهد که یکی از دکمه های کیبورد فشرده شود.
  • keypress: هنگامی رخ میدهد که یک دکمه حرفی را تایپ کند.
  • keyup:  هنگامی رخ میدهد که دکمه ی فشرده شده رها شود.
نکته : تنها شیء document و فیلد های متنی(text inputs) میتوانند برای رویدادهای کیبورد شنونده(Listener) داشته باشند.

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

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

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

event

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

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

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

نکته : برای بدست آوردن عدد یونیکد یک حرف میتوان از متد charCodeAt در شیء String استفاده کنید. ( charCodeAt in MDN)

و در آخر هم بدین صورت برای رویداد های کیبورد شنونده میسازیم و آنرا کنترل میکنیم.

یادآوری :  خاصیت keyCode عدد یونیکد حرف بزرگ دکمه فشرده شده را برمیگرداند.

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

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

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

سخن پایانی

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

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Abbas412(۲۳ دی ۱۳۹۳)

    سلام جناب امینی
    ممنون بابت مطلب خوبتون
    آماری که انتهای مطلب ذکر کردید، منبعش رو لطف می کنید؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram