ఒక ఫారమ్ లేదా ప్రశ్నాపత్రాన్ని సృష్టిస్తున్నప్పుడు, నిర్దిష్ట ఫీల్డ్‌కు వినియోగదారు ఇన్పుట్ విలువను కేటాయించాల్సిన అవసరం ఉంటుంది. ఉదాహరణకు, కాన్ఫిడెన్షియల్ ఎంట్రీలను జోడించడం, అంటే పాస్‌వర్డ్ లేదా ఎన్‌కోడ్ చేసిన విలువను ఉపయోగించడం కోసం. అటువంటి సందర్భాలలో, JavaScript ద్వారా దాచిన ఇన్పుట్ మూలకం విలువను సెట్ చేయడం వలన డేటాను సురక్షితంగా మరియు సురక్షితంగా ఉంచడంలో సహాయపడుతుంది.
జావాస్క్రిప్ట్ ద్వారా దాచిన ఇన్పుట్ ఫీల్డ్ విలువను సెట్ చేసే విధానాన్ని ఈ బ్లాగ్ చర్చిస్తుంది
జావాస్క్రిప్ట్ ద్వారా దాచిన ఇన్పుట్ ఫీల్డ్ విలువను ఎలా సెట్ చేయాలి?
జావాస్క్రిప్ట్ ద్వారా దాచిన ఇన్పుట్ ఫీల్డ్ విలువను సెట్ చేయడానికి, దిగువ పేర్కొన్న విధానాలను వర్తింపజేయండి:
విధానం 1: ఇన్నర్ HTML ప్రాపర్టీ ద్వారా దాచిన మూలకం విలువను సెట్ చేయండి
ది ' అంతర్గత HTML ”ప్రాపర్టీ మూలకం యొక్క HTML కంటెంట్‌ని అందిస్తుంది. కేటాయించబడిన దాచిన ఇన్పుట్ ఫీల్డ్‌కు వినియోగదారు నిర్వచించిన విలువను సెట్ చేయడానికి మరియు జోడించడానికి ఈ ప్రాపర్టీని ఉపయోగించవచ్చు.
సింటాక్స్:
element.innerHTML = టెక్స్ట్
పై వాక్యనిర్మాణంలో, “ మూలకం ” అనేది “తో జతచేయవలసిన మూలకాన్ని సూచిస్తుంది వచనం ' విలువ.
ఉదాహరణ
దిగువ పేర్కొన్న ఉదాహరణ ద్వారా వెళ్దాం:
< ఇన్పుట్ రకం = 'దాచిన' id = 'దాచిన మూలకం' విలువ = '' >< స్క్రిప్ట్ >
వీలు myInput = ప్రాంప్ట్ ( 'దయచేసి మీ వచనాన్ని నమోదు చేయండి' , '' ) ;
ఉంటే ( నా ఇన్పుట్ ! = శూన్యం ) {
వీలు x = document.getElementById ( 'దాచిన మూలకం' ) .innerHTML = 'దాచిన మూలకం యొక్క విలువ:' + myInput;
అప్రమత్తం ( x )
}
స్క్రిప్ట్ >
పై కోడ్ బ్లాక్‌లో:
- ముందుగా, పేర్కొన్న లక్షణాలతో ఇన్పుట్ ఫీల్డ్‌ను సృష్టించండి.
- ది ' రకం 'విలువతో లక్షణం' దాచబడింది ”అది దాచిన క్షేత్రం అని సూచిస్తుంది.
- ఆ తరువాత, ' ప్రాంప్ట్ ” డైలాగ్ బాక్స్ వినియోగదారు నుండి విలువను తీసుకుంటుంది.
- ఇప్పుడు, వినియోగదారు నిర్వచించిన విలువపై చెక్‌ను వర్తింపజేయి, అది కాదు “ శూన్య 'ఉపయోగించి' ఉంటే 'పరిస్థితి.
- చివరగా, దాచిన ఇన్పుట్ ఫీల్డ్‌ని దాని ద్వారా యాక్సెస్ చేయండి id 'ఉపయోగించి' getElementById() ” పద్ధతి మరియు వినియోగదారు నిర్వచించిన విలువను దానికి “ ద్వారా సెట్ చేయండి అంతర్గత HTML ”ఆస్తి.
- చివరగా, జోడించిన విలువను హెచ్చరిక ద్వారా ప్రదర్శించండి.
అవుట్‌పుట్
గమనించినట్లుగా, వినియోగదారు-ఇన్పుట్ విలువ దాచిన ఇన్పుట్ ఫీల్డ్‌కు జోడించబడింది.
విధానం 2: j క్వెరీ అప్రోచ్ ఉపయోగించి దాచిన మూలకం యొక్క విలువను సెట్ చేయండి
ఈ విధానంలో, j క్వెరీ ' విలువ () కనిపించే ఇన్పుట్ టెక్స్ట్ ఫీల్డ్ విలువను దాచిన ఇన్పుట్ ఫీల్డ్‌కు కేటాయించడానికి ” పద్ధతి ఉపయోగించబడుతుంది.
ఉదాహరణ
కింది కోడ్‌ను పర్యావలోకనం చేద్దాం:
< p > విలువను నమోదు చేయండి కోసం దాచిన మూలకం p >< ఇన్పుట్ id = 'నా ఇన్పుట్' విలువ = '' రకం = 'వచనం' /> br >
< ఇన్పుట్ id = 'దాచిన మూలకం' రకం = 'దాచిన' విలువ = '' />
< br >
< బటన్ id = 'btnShow' > సమర్పించండి బటన్ >
< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$ ( '#btnShow' ) .పై ( 'క్లిక్' , ఫంక్షన్ ( ) {
వీలు ఇన్పుట్ విలువ = $ ( '#నా ఇన్పుట్' ) .వాల్ ( ) ;
$ ( '#దాచిన మూలకం' ) .వాల్ ( ఇన్పుట్ విలువ ) ;
అప్రమత్తం ( 'దాచిన మూలకం విలువ:' + ఇన్పుట్ విలువ ) ;
} ) ;
స్క్రిప్ట్ >
పై కోడ్ లైన్లలో:
- ముందుగా, పేర్కొన్న లక్షణాలను కలిగి ఉన్న ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను చేర్చండి.
- అదేవిధంగా, దాని నుండి స్పష్టంగా కనిపించే విధంగా మరొక దాచిన ఇన్పుట్ ఫీల్డ్‌ను కేటాయించండి రకం ' గుణం.
- నిర్దిష్ట 'ని కలిగి ఉన్న
- ఆ తర్వాత, '' సహాయంతో j క్వెరీ లైబ్రరీని చేర్చండి src 'లో ' లక్షణం <స్క్రిప్ట్> ” ట్యాగ్.
- JS కోడ్‌లో, సృష్టించిన బటన్‌ను యాక్సెస్ చేసి, “ని అనుబంధించండి పై() ” బటన్ క్లిక్‌పై ఫంక్షన్‌ని అమలు చేయడానికి దానితో పద్ధతి.
- ఫంక్షన్ నిర్వచనంలో, కనిపించే ఇన్‌పుట్‌ను యాక్సెస్ చేయండి ' వచనం 'ఫీల్డ్ మరియు దాని విలువను' ఉపయోగించి పొందండి విలువ () ” పద్ధతి.
- తదుపరి దశలో, పొందబడిన విలువ దాచిన ఇన్‌పుట్‌కు కేటాయించబడుతుంది “ వచనం 'రంగం ద్వారా' విలువ () ” పద్ధతి.
- చివరగా, 'కి కేటాయించిన ఫలిత విలువను ప్రదర్శించండి దాచిన ఇన్పుట్ ఫీల్డ్ ”అలర్ట్ ద్వారా.
అవుట్‌పుట్
పై అవుట్‌పుట్‌లో, కనిపించే ఇన్పుట్ విలువ ' అని చూడవచ్చు వచనం 'ఫీల్డ్ కేటాయించబడింది' దాచబడింది ”ఇన్పుట్ ఫీల్డ్.
ముగింపు
జావాస్క్రిప్ట్ ద్వారా దాచిన ఇన్పుట్ ఫీల్డ్ విలువను సెట్ చేయడానికి, “ని వర్తింపజేయండి అంతర్గత HTML 'ఆస్తి లేదా j క్వెరీ' విలువ () ” పద్ధతి. వినియోగదారు నిర్వచించిన విలువను జోడించడం ద్వారా కావలసిన కార్యాచరణను వర్తింపజేయడానికి అంతర్గత HTML ప్రాపర్టీని ఉపయోగించవచ్చు. దాచిన ఇన్పుట్ ఫీల్డ్‌కు కనిపించే ఇన్పుట్ టెక్స్ట్ ఫీల్డ్ విలువను కేటాయించడానికి val() పద్ధతిని అన్వయించవచ్చు ఈ బ్లాగ్ జావాస్క్రిప్ట్ ద్వారా దాచిన ఇన్పుట్ ఫీల్డ్ విలువను సెట్ చేసే విధానాన్ని చర్చించింది.