این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش رویداد عمومی OnInput در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnInput در HTML با من همراه باشید.

Free-Learn
آنچه در این جلسه میخوانید :
رویداد عمومی OnInput در HTML
رویداد oninput زمانی رخ میدهد که یک مقدار توسط کاربر درون یک عنصر ورودی وارد شود ، معمولا از این رویداد درون تگ های <input> و <textarea> استفاده می کنند.
رویداد oninput شبیه به رویداد onchange می باشد ولی با این تفاوت که رویداد oninput بلافاصله و در لحظه اجرا میشه ( یعنی مثلا وقتی یه چیزی در اینپوت تایپ میکنیم اونم در لحظه به ازای هر حرفی که تایپ میشه اجرا میشه ) ولی رویداد onchange وقتی مثلا یه چیزی تایپ کردیم بعدش وقتی جای دیگه کلیک کردیم اجرا میشه.
Free-Learn
مثال از رویداد عمومی oninput در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body dir="rtl"> <p>نام تان را در باکس زیر وارد نمایید</p> <input type="text" id="myInput" oninput="MyMessage();"> <p id="Result"></p> <script> function MyMessage(){ var Input = document.getElementById("myInput").value; document.getElementById("Result").innerHTML = " سلام " + Input + " خوبی؟ "; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد oninput در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
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
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.

