معرفی رویدادهای مرتبط با کیبورد

1396/8/8 علیرضا حاتمی نیا 212

مقدمه

خدمت شما کاربر محترم وبسایت ilikephp سلام عرض می کنم. به قسمت جدید آموزش جی کوئری خوش آمدید. در جلسه قبلی با آموزش رویدادها در جیکوئری آشنا شدید. در این جلسه با آموزش مدیریت رویدادهای کیبورد در جی کوئری در خدمت شما هستم.

رویدادهای کیبورد در جیکوئری

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

  • رویداد keydown 
  • رویداد keypress 
  • رویداد  keyup

در ادامه به توضیح مختصری از رویدادهای مرتبط با کیبورد می پردازیم و مثالی را برای آنها عنوان می کنیم: 

رویداد keydown

هنگامی که کاربر یکی از دکمه های صفحه کلید (keyboard) را پایین فشار می دهد رویداد keydown اتفاق می افتد. توسط این رویداد می توانید تابعی را اجرا و مدیریت کنید. این رویداد برای تمامی دکمه های کیبورد قابل اجرا می شود.
در مثال زیر هنگامی که کاربر در جعبه متنی جهت تایپ یک حرف دکمه ای را پایین فشار می دهد  پیغام هشدار نمایش داده می شود. توجه داشته باشید که ابتدا پیغام هشدار نمایش داده می شود و پس از ok کردن هشدار ، کاراکتر در جعبه متنی چاپ می شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>event in jquery</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#myText').keydown(function(){
                alert('the keydown event occurs');
            })
        })
    </script>
   
</head>
<body>
    <input type="text" id="myText">
</body>
</html>

نتیجه کدهای بالا به صورت زیر می شود:

jquery-keydown-event

رویداد keypress

رویداد keypree فقط برای دکمه های کراکتری اتفاق می افتد. این رویداد کاملا مشابه رویداد keydwonعمل می کند. یعنی هنگامی که کاربر دکمه ای از کیبورد را فشار می دهد این رویداد اتفاق می افتد. تنها تفاوتی که با رویداد kedown دارد در این است که این رویداد برای دکمه های (ALT, CTRL, SHIFT ESC) غیر فعال است و فقط برای دکمه های کاراکنری اتفاق می افتد.

رویداد keyup

رویداد keyup نیز یکی دیگر از رویدادهای مرتبط با کیبورد است. این رویداد زمانی اتفاق می افتد که کاربر یکی از دکمه های کیبورد را فشار داده و حالا آن را رها می کند. زمانی که دکمه فشرده شده را رها کرد این رویداد اتفاق می افتد. این رویداد برای تمامی دکمه های کیبورد فعال می باشد. 
در مثال زیر کاربر درون جعبه متنی حرفی را تایپ می کند. زمانی که حرف تایپ شد و کاربر انگشت خود را رها کرد پیام هشدار به اون نمیاش داده می شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>event in jquery</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#myText').keyup(function(){
                alert('the keyup event occurs');
            })
        })
    </script>
   
</head>
<body>
    <input type="text" id="myText">
</body>
</html>

jquery-keyup-event

 

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت