జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించడానికి ఈ రైట్-అప్ మీకు మార్గనిర్దేశం చేస్తుంది.
జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని ఎలా గుర్తించాలి?
జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించడానికి, కింది పద్ధతులను వర్తింపజేయండి:
- ' క్వెరీ సెలెక్టర్() ”పద్ధతి
- ' getElementbyId() ”పద్ధతి
పేర్కొన్న విధానాలు ఒక్కొక్కటిగా ప్రదర్శించబడతాయి!
విధానం 1: document.querySelector() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించండి
ది ' document.querySelector() ” పద్ధతి CSS సెలెక్టర్‌కు సరిపోలే మొదటి మూలకాన్ని యాక్సెస్ చేస్తుంది, ఆపై addEventListener() పద్ధతి యాక్సెస్ చేయబడిన ఎలిమెంట్‌కు ఈవెంట్ హ్యాండ్లర్‌ను జోడిస్తుంది. ఇన్పుట్ రకాన్ని యాక్సెస్ చేయడానికి మరియు దాని విలువను నమోదు చేసినప్పుడు ట్యాబ్ కీ నొక్కినదా లేదా అని గుర్తించడానికి ఈ పద్ధతులను అన్వయించవచ్చు.
వాక్యనిర్మాణం
మూలకం. addEventListener ( సంఘటన , ఫంక్షన్ , క్యాప్చర్ ఉపయోగించండి )
ఇచ్చిన సింటాక్స్‌లో, “ సంఘటన ' ఈవెంట్ పేరును సూచిస్తుంది, ' ఫంక్షన్ 'సంఘటన జరిగినప్పుడు నిర్వర్తించే నిర్దిష్ట విధి, మరియు' క్యాప్చర్ ఉపయోగించండి ” అనేది ఐచ్ఛిక వాదన.
పత్రం. querySelector ( CSS సెలెక్టర్లు )పై వాక్యనిర్మాణంలో, “ CSS సెలెక్టర్లు ” document.querySelector() పద్ధతిలో పేర్కొనబడే ఒకటి లేదా అంతకంటే ఎక్కువ CSS సెలెక్టర్‌లను చూడండి.
పేర్కొన్న కాన్సెప్ట్‌ను బాగా అర్థం చేసుకోవడానికి క్రింది ఉదాహరణ ద్వారా వెళ్ళండి.
ఉదాహరణ
ముందుగా, ఇన్పుట్ రకాన్ని ఇలా పేర్కొనండి వచనం 'ప్రారంభ ప్లేస్‌హోల్డర్ విలువ మరియు 'లో శీర్షికతో
< h2 > ఫలితం < / h2 >
తరువాత, వర్తించు ' document.querySelector() 'పేర్కొన్న ఇన్పుట్ మరియు హెడ్డింగ్‌ను వరుసగా యాక్సెస్ చేయడానికి మరియు వాటిని ' అనే వేరియబుల్స్‌లో నిల్వ చేయడానికి పద్ధతి ఇన్పుట్ 'మరియు' ఫలితం ”:
ఇన్పుట్ చేయనివ్వండి = పత్రం. querySelector ( 'ఇన్పుట్' ) ;ఫలితాన్ని ఇవ్వండి = పత్రం. querySelector ( 'h2' ) ;
ఇప్పుడు, జోడించు ' కీడౌన్ ” addEventListener() పద్ధతిని ఉపయోగించి ఇన్పుట్ ఫీల్డ్‌తో ఈవెంట్. ఈ ఈవెంట్ వినియోగదారుకు ఎప్పుడు తెలియజేస్తుంది “ ట్యాబ్ 'కీ' సహాయంతో కింది షరతును వర్తింపజేయడం ద్వారా ఇన్పుట్ ఫీల్డ్‌లో నొక్కబడుతుంది అంతర్గత వచనం 'ఆస్తి:
ఇన్పుట్. addEventListener ( 'కీడౌన్' , ( మరియు ) => {ఉంటే ( మరియు. కీ === 'ట్యాబ్' ) {
ఫలితం. అంతర్గత వచనం = 'టాబ్ కీ నొక్కబడింది' ;
} లేకపోతే {
ఫలితం. అంతర్గత వచనం = 'ట్యాబ్ కీ నొక్కబడలేదు' ;
}
ఈ సందర్భంలో, వినియోగదారు ట్యాబ్ కీని నొక్కినప్పుడు, జోడించినది అమలు చేసిన చర్య గురించి తెలియజేస్తుంది:
విధానం 2: document.getElementbyId() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించండి
ది ' document.getElementById() ” పద్ధతిని దాని ఐడి ఆధారంగా నిర్దిష్ట HTML మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించవచ్చు. ఇన్పుట్ ఫీల్డ్‌ను పొందడానికి మరియు ట్యాబ్ కీ వంటి నిర్దిష్ట కీని నొక్కినప్పుడల్లా వినియోగదారుని అప్రమత్తం చేయడానికి ఈవెంట్‌ను జోడించడానికి ఈ పద్ధతిని అమలు చేయవచ్చు.
వాక్యనిర్మాణం
పత్రం. getElementById ( అంశాలు )ఇచ్చిన సింటాక్స్‌లో, “ అంశాలు ” అనేది పేర్కొన్న మూలకం యొక్క idని సూచిస్తుంది.
కింది ఉదాహరణను స్థూలంగా చూద్దాం.
ఉదాహరణ
దిగువ ఉదాహరణలో, మునుపటి పద్ధతిలో చర్చించిన విధంగా ఇన్పుట్ రకం మరియు ప్లేస్‌హోల్డర్ విలువను చేర్చండి:
ఇప్పుడు, “ని ఉపయోగించి ఇన్పుట్ ఫీల్డ్ ఐడిని పొందండి document.getElementById() ” పద్ధతి.
input= document.getElementById('tab')ని అనుమతించండి;
చివరగా, '' పేరుతో ఈవెంట్‌ను జోడించండి కీడౌన్ ” addEventListener() పద్ధతిలో, ఇది ఎప్పుడైనా వినియోగదారుని హెచ్చరిస్తుంది ట్యాబ్ 'కీ నొక్కబడింది:
ఇన్పుట్. addEventListener ( 'కీడౌన్' , ( మరియు ) => {ఉంటే ( మరియు. కీ === 'ట్యాబ్' ) {
అప్రమత్తం ( 'టాబ్ కీ నొక్కబడింది' ) ;
}
} ) ;
అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించడానికి మేము అన్ని సరళమైన పద్ధతులను చర్చించాము.
ముగింపు
జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించడానికి, “ని ఉపయోగించండి addEventListener() 'తో' document.querySelector() 'ఇన్పుట్ రకాన్ని పొందడం మరియు పేర్కొన్న కీని గుర్తించడం కోసం ఈవెంట్‌ను వర్తింపజేయడం లేదా ' getElementbyId() ”ఇన్పుట్ ఫీల్డ్‌ని దాని ఐడి ఆధారంగా పొందడం మరియు జోడించిన షరతు సంతృప్తి చెందినప్పుడు వినియోగదారుకు తెలియజేయడం కోసం పద్ధతి. జావాస్క్రిప్ట్‌లో ట్యాబ్ కీని గుర్తించడం గురించి ఈ బ్లాగ్ మార్గనిర్దేశం చేసింది.