این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش رویداد عمومی OnKeyUp در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnKeyUp در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
رویداد عمومی onkeyup در HTML
رویداد onkeyup
زمانی رخ میدهد که کاربر یک کلید را از روی صفحه کلید فشار دهد و سپس رها کند، یعنی در واقع این رویداد در لحظه ی رها کردن دکمه اجرا می شود.
رویدادهای دیگری از صفحه کلید داریم که معمولا این رویدادها با همدیگر مورد استفاده قرار میگیرند :
Free-Learn
مثال از رویداد عمومی onkeyup در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
مثال شماره ۱ : در این مثال از ۳ رویداد onkeydown و onkeyup و onkeypress استفاده شده
1 2 3 4 5 6 |
<body> <p>لطفا یه چیزی درون باکس زیر تایپ نمایید</p> <input type="text" id="myInput" onkeydown="Down();" onkeyup="Up();" onkeypress="Press();"> </body> |
مثال شماره ۲ : محاسبه تعداد کاراکترهای وارد شده در باکس متن ( textarea )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <p>لطفا یه چیزی درون باکس زیر تایپ نمایید</p> <textarea id="MyText" onkeyup="Count_Text();"></textarea> <h2 id="Result">0</h2> <script> function Count_Text(){ var result = document.getElementById("Result"); var MyText = document.getElementById("MyText"); result.innerHTML = MyText.value.length; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد onkeyup
در HTML پشتیبانی میکنند یا خیر.
نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
1 |
<element onkeyup="Script"> |
Free-Learn
جدول مقادیر رویداد onkeyup
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
مقدار | توضیح |
Script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد onkeyup
را میتوان در تمامی عناصر/تگ های معتبر HTML بکار برد.
ولی در تگ های زیر نمیتوان این رویداد را بکار برد :
<base> | <bdo> | <br> | <head> |
<html> | <iframe> | <meta> | <param> |
<script> | <style> | <title> |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.