ஒரு படிவம் அல்லது கேள்வித்தாளை உருவாக்கும் போது, ஒரு குறிப்பிட்ட புலத்திற்கு பயனர் உள்ளீட்டு மதிப்பை ஒதுக்க வேண்டிய தேவை இருக்கலாம். எடுத்துக்காட்டாக, ரகசிய உள்ளீடுகளைச் சேர்ப்பது, அதாவது, கடவுச்சொல் அல்லது குறியாக்கப்பட்ட மதிப்பைப் பயன்படுத்துவதற்காக. இதுபோன்ற சந்தர்ப்பங்களில், ஜாவாஸ்கிரிப்ட் மூலம் மறைக்கப்பட்ட உள்ளீட்டு உறுப்பு மதிப்பை அமைப்பது தரவைப் பாதுகாப்பாகவும் பாதுகாப்பாகவும் வைத்திருக்க உதவுகிறது.
இந்த வலைப்பதிவு JavaScript மூலம் மறைக்கப்பட்ட உள்ளீட்டு புலத்தின் மதிப்பை அமைப்பதற்கான செயல்முறையைப் பற்றி விவாதிக்கும்
ஜாவாஸ்கிரிப்ட் மூலம் மறைக்கப்பட்ட உள்ளீட்டு புலத்தின் மதிப்பை எவ்வாறு அமைப்பது?
JavaScript மூலம் மறைக்கப்பட்ட உள்ளீட்டு புலத்தின் மதிப்பை அமைக்க, கீழே குறிப்பிடப்பட்டுள்ள அணுகுமுறைகளைப் பயன்படுத்தவும்:
முறை 1: இன்னர்எச்டிஎம்எல் சொத்து மூலம் மறைக்கப்பட்ட உறுப்புகளின் மதிப்பை அமைக்கவும்
' உள் HTML 'சொத்து உறுப்புகளின் HTML உள்ளடக்கத்தை வழங்குகிறது. ஒதுக்கப்பட்ட மறைக்கப்பட்ட உள்ளீட்டு புலத்தில் பயனர் வரையறுக்கப்பட்ட மதிப்பை அமைக்கவும் இணைக்கவும் இந்த சொத்து பயன்படுத்தப்படலாம்.
தொடரியல்:
உறுப்பு.innerHTML = உரை
மேலே உள்ள தொடரியல், “ உறுப்பு ” என்பது “ உடன் இணைக்கப்பட வேண்டிய உறுப்பைக் குறிக்கிறது உரை ' மதிப்பு.
உதாரணமாக
கீழே உள்ள எடுத்துக்காட்டைப் பார்ப்போம்:
< உள்ளீடு வகை = 'மறைக்கப்பட்ட' ஐடி = 'மறைக்கப்பட்ட உறுப்பு' மதிப்பு = '' >< கையால் எழுதப்பட்ட தாள் >
அனுமதிக்க myInput = உடனடி ( 'உங்கள் உரையை உள்ளிடவும்' , '' ) ;
என்றால் ( என் உள்ளீடு ! = பூஜ்ய ) {
அனுமதிக்க x = document.getElementById ( 'மறைக்கப்பட்ட உறுப்பு' ) .innerHTML = 'மறைக்கப்பட்ட உறுப்பு மதிப்பு:' + எனது உள்ளீடு;
எச்சரிக்கை ( எக்ஸ் )
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு தொகுதியில்:
- முதலில், கூறப்பட்ட பண்புகளுடன் உள்ளீட்டு புலத்தை உருவாக்கவும்.
- ' வகை 'மதிப்புடன் கூடிய பண்பு' மறைக்கப்பட்டுள்ளது ” என்பது மறைக்கப்பட்ட புலம் என்பதைக் குறிக்கிறது.
- அதன் பிறகு, ' உடனடியாக ” உரையாடல் பெட்டி பயனரிடமிருந்து ஒரு மதிப்பை எடுக்கும்.
- இப்போது, பயனர் வரையறுத்த மதிப்பின் மீது ஒரு சரிபார்ப்பைப் பயன்படுத்தவும், அதாவது ' ஏதுமில்லை ' பயன்படுத்தி ' என்றால் ' நிலை.
- கடைசியாக, மறைக்கப்பட்ட உள்ளீட்டு புலத்தை அதன் “ மூலம் அணுகவும் ஐடி ' பயன்படுத்தி ' getElementById() 'முறை மற்றும் பயனர் வரையறுக்கப்பட்ட மதிப்பை அதற்கு' வழியாக அமைக்கவும் உள் HTML ”சொத்து.
- இறுதியாக, ஒரு எச்சரிக்கை வழியாக இணைக்கப்பட்ட மதிப்பைக் காட்டவும்.
வெளியீடு
கவனிக்கப்பட்டபடி, பயனர் உள்ளீட்டு மதிப்பு மறைக்கப்பட்ட உள்ளீட்டு புலத்தில் சேர்க்கப்பட்டுள்ளது.
முறை 2: jQuery அணுகுமுறையைப் பயன்படுத்தி மறைக்கப்பட்ட உறுப்புகளின் மதிப்பை அமைக்கவும்
இந்த அணுகுமுறையில், jQuery இன் ' வால்() 'மறைக்கப்பட்ட உள்ளீட்டு புலத்திற்கு புலப்படும் உள்ளீட்டு உரை புலத்தின் மதிப்பை ஒதுக்குவதற்கு முறை பயன்படுத்தப்படும்.
உதாரணமாக
பின்வரும் குறியீட்டை மேலோட்டமாகப் பார்ப்போம்:
< ப > மதிப்பை உள்ளிடவும் க்கான மறைக்கப்பட்ட உறுப்பு ப >< உள்ளீடு ஐடி = 'என் உள்ளீடு' மதிப்பு = '' வகை = 'உரை' /> br >
< உள்ளீடு ஐடி = 'மறைக்கப்பட்ட உறுப்பு' வகை = 'மறைக்கப்பட்ட' மதிப்பு = '' />
< br >
< பொத்தானை ஐடி = 'btnShow' > சமர்ப்பிக்கவும் பொத்தானை >
< கையால் எழுதப்பட்ட தாள் src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > கையால் எழுதப்பட்ட தாள் >
< கையால் எழுதப்பட்ட தாள் >
$ ( '#btnShow' ) .மீது ( 'கிளிக்' , செயல்பாடு ( ) {
அனுமதிக்க உள்ளீட்டு மதிப்பு = $ ( '#எனது உள்ளீடு' ) .val ( ) ;
$ ( '#மறைக்கப்பட்ட உறுப்பு' ) .val ( உள்ளீட்டு மதிப்பு ) ;
எச்சரிக்கை ( 'மறைக்கப்பட்ட உறுப்பு மதிப்பு:' + உள்ளீட்டு மதிப்பு ) ;
} ) ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீட்டு வரிகளில்:
- முதலில், கூறப்பட்ட பண்புக்கூறுகளைக் கொண்ட உள்ளீட்டு உரைப் புலத்தைச் சேர்க்கவும்.
- அதேபோல், மற்றொரு மறைக்கப்பட்ட உள்ளீட்டு புலத்தை ஒதுக்கவும், அதன் ' வகை ” பண்பு.
- குறிப்பிட்ட '' கொண்ட
- அதன் பிறகு, jQuery நூலகத்தின் உதவியுடன் ' src 'இல் உள்ள பண்பு'