رویداد onfocus

رویدادهای DOM FocusEvent

تعریف و استفاده

رویداد onfocus زمانی رخ می‌دهد که عنصر تمرکز می‌یابد.

رویداد onfocus اغلب با <input>، <select> و <a> استفاده می‌شود.

توجه: رویداد onfocus با رویداد onblurدر مقابل.

توجه: رویداد onfocus مشابه رویداد onfocusinمهم‌ترین تفاوت این است که رویداد onfocus بیلوب نمی‌شود. بنابراین، اگر می‌خواهید مشخص کنید که آیا یک عنصر یا یکی از فرزندان آن تمرکز را دارد یا خیر، می‌توانید از رویداد onfocusin استفاده کنید. اما می‌توانید با استفاده از مетод addEventListener()از useCapture از پارامترها برای انجام این کار استفاده کنید.

مثال

مثال 1

جاوااسکریپت را در زمانی که فیلد ورودی تمرکز می‌یابد، اجرا می‌کند:

<input type="text" onfocus="myFunction()">

آزمایش کنید

در پایین صفحه مثال‌های بیشتری از TIY وجود دارد.

منطق

در HTML:

<عنصر onfocus="myScript">

آزمایش کنید

در جاوااسکریپت:

موضوع.onfocus = function(){myScript};

آزمایش کنید

در جاوااسکریپت، از روش addEventListener() استفاده کنید:

موضوع.addEventListener("focus", myScript);

آزمایش کنید

نکته:اینترنت اکسپلورر 8 یا نسخه‌های قبلی آن از آن پشتیبانی نمی‌کند مетод addEventListener()。

جزئیات فنی

تورم: پشتیبانی نمی‌شود
قابل لغو: پشتیبانی نمی‌شود
نوع رویداد: FocusEvent
برچسب‌های HTML پشتیبانی شده: تمام عناصر HTML، به استثنای：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> و <title>
نسخه‌ی DOM: رویدادهای سطح 2

پشتیبانی مرورگر

رویداد Chrome IE Firefox Safari Opera
onfocus پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

مثال‌های بیشتر

مثال 2

استفاده از رویدادهای onfocus و onblur:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

آزمایش کنید

مثال 3

پاک کردن فیلد ورودی تمرکز گرفته شده:

<!-- زمانی که فیلد ورودی تمرکز می‌گیرد، مقدار فعلی آن را با یک رشته خالی جایگزین می‌کند -->
<input type="text" onfocus="this.value=''" value="Blabla">

آزمایش کنید

مثال 4

پیش‌بینی‌کننده‌ی رویداد: تنظیم پارامتر useCapture در addEventListener() به true:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

آزمایش کنید

مثال 5

پیش‌بینی‌کننده‌ی رویداد: استفاده از رویداد focusin (Firefox پشتیبانی نمی‌کند):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

آزمایش کنید

رویدادهای DOM FocusEvent