آموزش رویداد عمومی OnInput در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnInput در HTML با من همراه باشید.
Free-Learn
در این جلسه میخوانیم
رویداد عمومی OnInput در HTML
رویداد oninput زمانی رخ میدهد که یک مقدار توسط کاربر درون یک عنصر ورودی وارد شود ، معمولا از این رویداد درون عناصر <input> و <textarea> استفاده می کنند.
رویداد oninput شبیه به رویداد onchange می باشد ولی با این تفاوت که رویداد oninput بلافاصله پس از تغییر مقدار یک عنصر رخ میدهد در حالیکه رویداد onchange زمانی که حالت فوکوس بروی عنصر خارج می شود رخ میدهد.
برای مشاهده رویداد عمومی OnChange لطفا اینجا کلیک نمایید.
Free-Learn
مثال از رویداد عمومی oninput در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body dir="rtl"> <p>نام تان را در باکس زیر وارد نمایید</p> <input type="text" id="myInput" oninput="myFunction()"> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myInput").value; document.getElementById("demo").innerHTML = "نام شما هست: " + x; document.getElementById("demo").style.color="blue"; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد oninput در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | ۴٫۰ | بله | ۵٫۰ | ۹٫۰ |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
|
1 |
<element oninput="script"> |
Free-Learn
جدول مقادیر رویداد oninput
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد oninput را میتوان در عناصر/تگ های زیر بکار برد :
| <input type=”password”> | <input type=”search”> |
| <input type=”text”> | <textarea> |
Free-Learn
نکات و توضیحات
رویداد oninput یک رویداد جدید/اضافه شده در HTML5 می باشد.
