onfocus ఇవెంట్

DOM ఇవెంట్స్ FocusEvent

నిర్వచన మరియు ఉపయోగం

onfocus ఇవెంట్ ఎలిమెంట్ ఫోకస్ పొందినప్పుడు జరుగుతుంది.

onfocus ఇవెంట్ అత్యంత ఉపయోగించేది <input>, <select> మరియు <a> వంటి విధానాలతో కలిసి ఉపయోగించబడుతుంది.

సూచన: onfocus ఇవెంట్ తో పాటు onblur ఇంటర్నెట్ ఇవెంట్ముక్వించని విధానం వంటిది

సూచన: onfocus ఇవెంట్ అనగా విధానం వంటిది onfocusin ఇంటర్నెట్ ఇవెంట్ప్రధాన వ్యత్యాసం అనగా onfocus ఇవెంట్ బాపల్ కాదు. అందువల్ల, మీరు ఒక ఎలిమెంట్ లేదా దాని కుమారులు ఫోకస్ పొందినా తెలుసుకోవడానికి onfocusin ఇవెంట్ ఉపయోగించవచ్చు. కానీ, onfocus ఇవెంట్ పై ఉపయోగించి అది చేయవచ్చు. addEventListener() మాదిరి విధానంయొక్క useCapture ఈ పనిని చేయడానికి పారామీటర్స్ ఉపయోగించండి.

ఉదాహరణ

ఉదాహరణ 1

ఇన్‌పుట్ ఫీల్డ్ ఫోకస్ పొందినప్పుడు జావాస్క్రిప్ట్ అమలు చేయండి:

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

స్వయంగా ప్రయత్నించండి

పేజీ కిందికి మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。

విధానం

హ్ట్మ్ల్ లో కారణం కాగా:

<element onfocus="myScript">

స్వయంగా ప్రయత్నించండి

జావాస్క్రిప్ట్ లో కారణం కాగా:

object.onfocus = function(){myScript};

స్వయంగా ప్రయత్నించండి

జావాస్క్రిప్ట్ లో అడ్డీలిస్టెన్ విధానాన్ని ఉపయోగించడం లోపల:

object.addEventListener("focus", myScript);

స్వయంగా ప్రయత్నించండి

పరిశీలన:ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 8 లేదా అంతకు ముంది వర్షాలు ఈ విధానాన్ని మద్దతు ఇవ్వలేదు addEventListener() మాదిరి విధానం。

సాంకేతిక వివరాలు

బాయిలవర్ ప్రక్రియా: మద్దతు లేదు
రద్దు చేయగలిగేది: మద్దతు లేదు
ఈవెంట్ రకం: FocusEvent
మద్దతు పొందే HTML టాగ్స్: అన్ని HTML ఎలమెంట్స్, మరియు కాకుండా: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> మరియు <title>
DOM వెర్షన్: లెవల్ 2 ఈవెంట్లు

బ్రౌజర్ మద్దతు

ఈవెంట్ చ్రోమ్ ఐఇ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
onfocus మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

"onfocus" మరియు "onblur" ఈవెంట్లను కలిపి ఉపయోగించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

ఫోకస్ పొందిన ఇంపుట్ ఫీల్డ్ నివారించండి:

ఇంపుట్ ఫీల్డ్ ఫోకస్ పొందినప్పుడు, దాని ప్రస్తుత విలువను ఖాళీ చేయండి:
<input type="text" onfocus="this.value=''" value="Blabla">

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

ఈవెంట్ డెలిగేషన్: addEventListener() యొక్క useCapture పారామితిని 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