ఈ వ్రాత జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందే విధానాలను వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను ఎలా పొందాలి?
కింది విధానాలను ఉపయోగించి జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందవచ్చు:
- ' getElementById() ” పద్ధతి.
- ' addEventListener() ” పద్ధతి.
- ' j క్వెరీ ”.
విధానం 1: getElementById() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందండి
ది ' getElementById() 'పద్ధతి పేర్కొన్న 'తో మూలకాన్ని యాక్సెస్ చేస్తుంది id ”.ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ని పొందేందుకు మరియు దానిలో నమోదు చేసిన విలువను తిరిగి ఇవ్వడానికి ఈ పద్ధతిని అమలు చేయవచ్చు.
వాక్యనిర్మాణం
పత్రం. getElementById ( మూలకం )
ఇచ్చిన సింటాక్స్‌లో:
- ' మూలకం ''ని సూచిస్తుంది id ” నిర్దిష్ట మూలకానికి వ్యతిరేకంగా పొందాలి.
ఉదాహరణ
కింది ఉదాహరణను పరిశీలిద్దాం:
కింది కోడ్‌లో కింది దశలను వర్తింపజేద్దాం:
< h3 > టెక్స్ట్ ఏరియా విలువను పొందండి లో జావాస్క్రిప్ట్ h3 >
ఏదో టైప్ చేయండి : < ఇన్పుట్ రకం = 'వచనం' id = 'పదము' ప్లేస్‌హోల్డర్ = 'వచనాన్ని నమోదు చేయండి...' >
< బటన్ క్లిక్ చేయండి = 'textareaValue()' > విలువ పొందండి బటన్ >
కింది దశలను అమలు చేయండి:
- మొదటి దశలో, పేర్కొన్న శీర్షికను పేర్కొనండి.
- ఆ తర్వాత, పేర్కొన్న “తో ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను చేర్చండి id 'మరియు' ప్లేస్‌హోల్డర్ ' విలువ.
- అలాగే, జోడించిన “తో బటన్‌ను సృష్టించండి క్లిక్ చేయండి ” ఈవెంట్ టెక్స్ట్ ఏరియా వాల్యూ() ఫంక్షన్‌కి దారి మళ్లిస్తోంది
కోడ్ యొక్క జావాస్క్రిప్ట్ భాగానికి ముందుకు వెళ్దాం:
< స్క్రిప్ట్ >ఫంక్షన్ టెక్స్ట్ ఏరియా విలువ ( ) {
వీలు పొందండి = పత్రం. getElementById ( 'పదము' ) . విలువ
అప్రమత్తం ( పొందండి )
}
స్క్రిప్ట్ >
పై జావాస్క్రిప్ట్ కోడ్‌లో:
- ' అనే ఫంక్షన్‌ను ప్రకటించండి textareaValue() ”.
- దాని నిర్వచనంలో, ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ని దాని పేర్కొన్న ఐడి ద్వారా యాక్సెస్ చేయండి “ getElementById() ” పద్ధతి.
- అలాగే, వర్తించు “ విలువ ” ఎంటర్ చేసిన వచన విలువను తిరిగి పొందడానికి ఆస్తి.
- చివరగా, '' ద్వారా టెక్స్ట్ ఏరియా విలువను ప్రదర్శించండి అప్రమత్తం ” డైలాగ్ బాక్స్.
అవుట్‌పుట్
ఎగువ అవుట్‌పుట్‌లో, నమోదు చేసిన విలువ హెచ్చరిక డైలాగ్ బాక్స్ ద్వారా పొందబడిందని గమనించవచ్చు.
విధానం 2: addEventListener() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందండి
ది ' addEventListener() 'పద్ధతి'ని అనుబంధించడానికి ఉపయోగించబడుతుంది సంఘటన ”ఒక మూలకంతో. ఫంక్షన్‌కు ఈవెంట్‌ను జోడించడానికి ఈ పద్ధతిని ఉపయోగించవచ్చు, అంటే కన్సోల్‌లో ప్రతి ఇన్‌పుట్‌పై టెక్స్ట్ ఏరియా విలువను పొందడం జరుగుతుంది.
వాక్యనిర్మాణం
మూలకం. addEventListener ( సంఘటన , ఫంక్షన్ , కార్యనిర్వాహకుడు )పై వాక్యనిర్మాణంలో:
- ' సంఘటన ” ఈవెంట్ పేరును సూచిస్తుంది.
- ' ఫంక్షన్ ” ఈవెంట్ యొక్క ట్రిగ్గర్‌పై అమలు చేయాల్సిన ఫంక్షన్‌ను సూచిస్తుంది.
- ' కార్యనిర్వాహకుడు ” అనేది ఐచ్ఛిక పరామితి.
ఉదాహరణ
క్రింద ఇవ్వబడిన ఉదాహరణను దశల వారీగా అనుసరించండి:
< textarea id = 'txtarea' వరుసలు = '5' cols = '25' ప్లేస్‌హోల్డర్ = 'వచనాన్ని నమోదు చేయండి...' > వచన ప్రాంతం >
< స్క్రిప్ట్ రకం = 'టెక్స్ట్/జావాస్క్రిప్ట్' >
వీలు పొందండి = పత్రం. getElementById ( 'txtarea' ) ;
కన్సోల్. లాగ్ ( పొందండి . విలువ ) ;
పొందండి . addEventListener ( 'ఇన్పుట్' , ఫంక్షన్ టెక్స్ట్ ఏరియా విలువ ( సంఘటన ) {
కన్సోల్. లాగ్ ( సంఘటన. లక్ష్యం . విలువ ) ;
} ) ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- పేర్కొన్న లేబుల్‌ను పేర్కొనండి. అలాగే, 'ని కేటాయించండి వచన ప్రాంతం 'నిర్దిష్ట విలువతో మూలకం' id 'మరియు' ప్లేస్‌హోల్డర్ ” మరియు దాని కొలతలు కూడా సర్దుబాటు చేయండి.
- కోడ్ యొక్క జావాస్క్రిప్ట్ భాగంలో, మునుపటి దశలో పేర్కొన్న టెక్స్ట్ ఏరియాను యాక్సెస్ చేసి, దానిని ఉపయోగించి ప్రదర్శించండి విలువ ”ఆస్తి.
- తదుపరి దశలో, ఈవెంట్‌ను అటాచ్ చేయండి ' వచనం 'తీసుకున్న వారికి' వచన ప్రాంతం 'ఉపయోగించి' addEventListener() “పద్ధతి మరియు దానిని ఫంక్షన్‌కు వర్తింపజేయండి” textareaValue() ”. ది ' సంఘటన ” దాని వాదనలో ట్రిగ్గర్ చేయబడిన ఈవెంట్ గురించి సమాచారాన్ని పంపుతుంది.
- ఇది నమోదు చేసిన ప్రతి వచన విలువలను పక్కపక్కనే లాగింగ్ చేస్తుంది.
అవుట్‌పుట్
పై అవుట్‌పుట్ నుండి, “ తీసుకురావడం ” ఎంటర్ చేసిన ప్రతి వచన విలువలను గమనించవచ్చు.
విధానం 3: j క్వెరీని ఉపయోగించి జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందండి
' j క్వెరీ ” ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ని యాక్సెస్ చేయడానికి అన్వయించవచ్చు మరియు డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) లోడ్ అయిన వెంటనే దాని ఫంక్షనాలిటీలను ట్రిగ్గర్ చేయవచ్చు.
ఉదాహరణ
క్రింద ఇవ్వబడిన ఉదాహరణను అనుసరించండి:
ఏదో టైప్ చేయండి : < ఇన్పుట్ రకం = 'వచనం' id = 'పదము' ప్లేస్‌హోల్డర్ = 'వచనాన్ని నమోదు చేయండి...' >
< బటన్ > విలువ పొందండి బటన్ >
పై కోడ్ లైన్లలో, ఈ క్రింది దశలను చేయండి:
- దాని పద్ధతులను వర్తింపజేయడానికి j క్వెరీ లైబ్రరీని చేర్చండి.
- పేర్కొనండి ' ఇన్పుట్ '' యొక్క పేర్కొన్న విలువలతో టెక్స్ట్ ఫీల్డ్‌గా id 'మరియు' ప్లేస్‌హోల్డర్ ” ముందు చర్చించినట్లు.
- అలాగే, బటన్ క్లిక్‌పై విలువను పొందడానికి బటన్‌ను సృష్టించండి.
కోడ్ యొక్క జావాస్క్రిప్ట్ భాగానికి వెళ్లండి:
< స్క్రిప్ట్ >$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
కన్సోల్. లాగ్ ( $ ( 'ఇన్పుట్:టెక్స్ట్' ) . విలువ ( ) ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
పేర్కొన్న దశలను అనుసరించండి:
- వర్తించు ' సిద్ధంగా () లోడ్ చేయబడిన DOMపై తదుపరి పద్ధతులను వర్తింపజేయడానికి 'పద్ధతి.
- సృష్టించిన బటన్‌ను యాక్సెస్ చేసి, “అటాచ్ చేయండి క్లిక్() ” దాని పరామితిలో పేర్కొన్న ఫంక్షన్‌ని అమలు చేసే పద్ధతి.
- క్లిక్() పద్ధతి పేర్కొన్న ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను యాక్సెస్ చేస్తుంది మరియు కన్సోల్‌లో నమోదు చేసిన టెక్స్ట్ విలువను లాగ్ చేస్తుంది.
అవుట్‌పుట్
అందువల్ల, రకం విలువ కన్సోల్‌లో లాగ్ చేయబడింది.
ఇవి జావాస్క్రిప్ట్ సహాయంతో టెక్స్ట్ ఏరియా విలువను పొందడానికి వివిధ మార్గాలు.
ముగింపు
ది ' getElementById() 'పద్ధతి,' addEventListener() 'పద్ధతి లేదా' j క్వెరీ ” జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను పొందడానికి ఉపయోగించవచ్చు. getElementById() పద్ధతిని ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ని యాక్సెస్ చేయడానికి మరియు ఎంటర్ చేసిన టెక్స్ట్ ఏరియా విలువను అలర్ట్ ద్వారా ప్రదర్శించడానికి అమలు చేయవచ్చు. addEventListener() పద్ధతిని జోడించడానికి ఉపయోగించవచ్చు ఇన్పుట్ ” ఈవెంట్ ప్రతి ఇన్‌పుట్‌పై పక్కపక్కనే వచన విలువను పొందుతుంది. j క్వెరీని నేరుగా బటన్‌ను యాక్సెస్ చేయడానికి అన్వయించవచ్చు మరియు కన్సోల్‌పై బటన్ క్లిక్‌పై నమోదు చేసిన వచన విలువను తిరిగి పొందవచ్చు. జావాస్క్రిప్ట్‌లో టెక్స్ట్ ఏరియా విలువను ఎలా పొందాలో ఈ ట్యుటోరియల్ వివరిస్తుంది.