رویداد oninput در HTML5 درج مقدار در فیلد input

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی صفت رویدادیoninput در سند html می پردازیم. ویژگی رویدادی oninput زمانی رخ می دهد که یک مقدار توسط کاربر درون فیلد یک تگ html وارد شود. خصوصیت رویدادی oninput یک رویداد عمومی تگ های html است. خاصیت رویدادی oninput بیشتر درون تگ textarea و تگ input استفاده می شود.

رویداد oninput در HTML5 درج مقدار در فیلد input - سایت آموزی

معرفی صفت رویدادی oninput در سند اچ تی ام ال

صفت رویدادی oninput زمانی رخ می دهد که یک مقدار توسط کاربر درون فیلد یک تگ html وارد شود. این رویداد هم جزء رویداد عمومی در تگ های html است.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

خاصیت رویدادی oninput یک رویداد جدید اضافه شده در HTML5 می باشد. البته خاصیت رویدادی oninput بیشتر درون تگ textarea و تگ input استفاده می شود. ویژگی رویدادی oninput در دسته رویداد های مربوط به فرم ( form ) قرار می گیرد.

نکته مهم

خاصیت رویدادی oninput شبیه به رویداد onchange می باشد. ولی با این تفاوت که ویژگی رویدادی oninput بلافاصله پس از تغییر مقدار یک تگ html رخ میدهد. در حالی که رویداد onchange زمانی که یک تگ html از حالت فوکوس خارج می شود رخ میدهد.

تفاوت دیگر این دو رویداد در این است که رویداد onchange معمولا درون تگ select استفاده می شود. در حالی که خصوصیت رویدادی oninput معمولا درون تگ input و تگ textarea کاربرد دارد.

مثال در مورد استفاده از ویژگی oninput درون تگ input

<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>

بررسی ویژگی oninput درون سند html 4.0.1 و HTML5

خاصیت رویدادی oninput ، در نسخه HTML5 معرفی شده است. و در نسخه HTML4.01 و نسخه های قدیمی تر وجود نداشته و پشتیبانی نمی شود.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

پشتیبانی مرورگرهای اینترنتی از ویژگی oninput

پیوندهای کاربردی و مفید

تگ های اچ تی ام ال در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های اچ تی ام ال در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های اچ تی ام ال در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

رویداد oninput در HTML5 درج مقدار در فیلد input – اختصاصی سایت آموزی