Textarea மறுஅளவிடுதலைத் தடுக்கிறது
HTML படிவங்களுடன் பணிபுரியும் போது, பயனர்கள் உரைப்பகுதியின் அளவை மாற்றுவதைத் தடுக்க வேண்டிய சூழ்நிலைகளை நீங்கள் சந்திக்க நேரிடலாம். இயல்பாக, கீழ் வலது மூலையில் கிளிக் செய்து இழுப்பதன் மூலம் உரைப்பகுதியின் அளவை மாற்றலாம். இந்த இயல்புநிலை நடத்தை சில நேரங்களில் உங்கள் படிவத்தின் அமைப்பையும் வடிவமைப்பையும் சீர்குலைக்கலாம்.
அதிர்ஷ்டவசமாக, ஒரு textarea இன் மறுஅளவிடக்கூடிய சொத்தை முடக்குவது நேரடியானது மற்றும் CSS ஐப் பயன்படுத்தி நிறைவேற்ற முடியும். இந்த வழிகாட்டியில், மறுஅளவிடுதலை திறம்பட முடக்குவதற்கான வழிமுறைகளை நாங்கள் ஆராய்வோம், உங்கள் டெக்ஸ்ட் ஏரியா நோக்கம் கொண்ட அளவில் நிலையானதாக இருப்பதை உறுதிசெய்வோம்.
| கட்டளை | விளக்கம் |
|---|---|
| resize: none; | இந்த CSS பண்பு ஒரு உறுப்பின் மறுஅளவை முடக்குகிறது. |
| style="resize: none;" | HTML குறிச்சொல்லுக்குள் நேரடியாக உரைப்பகுதியின் மறுஅளவை முடக்க இன்லைன் CSS. |
| document.getElementById | HTML உறுப்பை அதன் ஐடி மூலம் தேர்ந்தெடுக்க JavaScript முறை. |
| textarea | HTML குறிச்சொல் பல வரி உரை உள்ளீட்டு புலத்தை வரையறுக்கப் பயன்படுகிறது. |
| <style></style> | HTML குறிச்சொற்கள் பிரிவில் உள்ளக CSS பாணிகளை வரையறுக்கப் பயன்படுகிறது. |
| <script></script> | ஜாவாஸ்கிரிப்ட் போன்ற கிளையன்ட் பக்க ஸ்கிரிப்டை வரையறுக்க HTML குறிச்சொற்கள் பயன்படுத்தப்படுகின்றன. |
Textarea மறுஅளவிடுதலை முடக்குகிறது: ஒரு விரிவான வழிகாட்டி
வழங்கப்பட்ட எடுத்துக்காட்டுகளில், HTML இல் உள்ள உரைப்பகுதியின் மறுஅளவிடக்கூடிய பண்புகளை முடக்க பல்வேறு முறைகளை நாங்கள் ஆராய்வோம். முதல் முறை CSS ஐ அமைப்பதன் மூலம் பயன்படுத்துகிறது resize: none; சொத்து. இந்த சொத்து a க்குள் சேர்க்கப்பட்டது <style></style> HTML தலைப்பில் குறிச்சொல், குறிப்பிட்ட வகுப்பு அல்லது ஐடியுடன் கூடிய எந்த உரைப்பகுதியையும் மறுஅளவிடப்படுவதை திறம்பட தடுக்கிறது. இந்த எளிய CSS விதியைச் சேர்ப்பதன் மூலம், படிவம் அல்லது பக்கத்தின் தளவமைப்பு ஒருமைப்பாட்டைப் பேணுவதன் மூலம், textarea ஒரு நிலையான அளவாக இருப்பதை உறுதிசெய்யலாம்.
இரண்டாவது எடுத்துக்காட்டு, HTML குறிச்சொல்லிலேயே இன்லைன் CSS ஐப் பயன்படுத்தி அதே முடிவை எவ்வாறு அடைவது என்பதைக் காட்டுகிறது. சேர்ப்பதன் மூலம் style="resize: none;" நேரடியாக பண்புக்கூறு <textarea> குறிச்சொல், வெளிப்புற அல்லது உள் நடைத்தாள் தேவையில்லாமல் அதன் மறுஅளவிடக்கூடிய சொத்தை நாங்கள் முடக்குகிறோம். இந்த முறை விரைவான திருத்தங்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும் அல்லது ஒரு CSS விதியைச் சேர்ப்பது குறைவான நேரடியானதாக இருக்கும் போது மாறும் வகையில் உருவாக்கப்பட்ட உள்ளடக்கத்தைக் கையாளும் போது.
மூன்றாவது எடுத்துக்காட்டில், டெக்ஸ்ட் ஏரியாவின் மறுஅளவிடக்கூடிய சொத்தை முடக்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறோம். இங்கே, நாம் முதலில் ஒரு அடிப்படை HTML கட்டமைப்பை சேர்க்கிறோம் <textarea> உறுப்பு மற்றும் இந்த உறுப்பை அதன் ஐடி மூலம் தேர்ந்தெடுக்கும் ஸ்கிரிப்ட் document.getElementById. பின்னர் நாங்கள் அமைத்தோம் style.resize தேர்ந்தெடுக்கப்பட்ட உரைப் பகுதியின் சொத்து 'none'. உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டில் உள்ள பயனர் தொடர்புகள் அல்லது பிற நிபந்தனைகளின் அடிப்படையில் HTML உறுப்புகளின் பண்புகளை நீங்கள் மாறும் வகையில் கட்டுப்படுத்த வேண்டியிருக்கும் போது இந்த அணுகுமுறை பயனுள்ளதாக இருக்கும். இந்த முறைகளை இணைப்பதன் மூலம், உங்கள் வலைத் திட்டங்களில் உரைப்பகுதிகளின் மறுஅளவிடுதலைக் கட்டுப்படுத்த உங்களுக்கு நெகிழ்வான விருப்பங்கள் உள்ளன.
CSS ஐப் பயன்படுத்தி Textarea மறுஅளவிடுதலை முடக்கவும்
CSS ஐப் பயன்படுத்துதல்
/* Add this CSS to your stylesheet */textarea {resize: none;}
இன்லைன் CSS ஐப் பயன்படுத்தி Textarea மறுஅளவிடுதலை முடக்கவும்
HTML இல் இன்லைன் CSS ஐப் பயன்படுத்துதல்
<textarea style="resize: none;"></textarea>
JavaScript ஐப் பயன்படுத்தி Textarea மறுஅளவிடுதலை முடக்கவும்
JavaScript ஐப் பயன்படுத்துதல்
<!DOCTYPE html><html><head><title>Disable Textarea Resizing</title><style>textarea {width: 300px;height: 150px;}</style></head><body><textarea id="myTextarea"></textarea><script>document.getElementById('myTextarea').style.resize = 'none';</script></body></html>
Textarea நடத்தையை கட்டுப்படுத்துவதற்கான கூடுதல் நுட்பங்கள்
டெக்ஸ்ட் ஏரியாவின் மறுஅளவிடக்கூடிய சொத்தை முடக்குவது பொதுவான தேவையாக இருக்கும்போது, பயனர் அனுபவத்தை மேம்படுத்தும் மற்றும் படிவ அமைப்பைப் பராமரிக்கக்கூடிய டெக்ஸ்ட் ஏரியாக் கட்டுப்பாட்டின் பிற அம்சங்களும் உள்ளன. ஒரு பயனர் உள்ளீடு செய்யக்கூடிய எழுத்துகளின் எண்ணிக்கையைக் கட்டுப்படுத்துவது போன்ற ஒரு நுட்பம். ஒரு அமைப்பதன் மூலம் maxlength மீது பண்பு <textarea> குறிச்சொல், நீங்கள் உள்ளிடக்கூடிய உரையின் அளவைக் கட்டுப்படுத்தலாம். பதில்கள் சுருக்கமாக அல்லது குறிப்பிட்ட இடத்தில் பொருத்தமாக இருக்க வேண்டிய படிவங்களுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.
மற்றொரு பயனுள்ள அம்சம், உரைப்பகுதியை அதன் உள்ளடக்கத்தின் அடிப்படையில் தானாக அளவை மாற்றும் திறன் ஆகும். CSS மற்றும் JavaScript ஆகியவற்றின் கலவையுடன் இதை அடையலாம். உதாரணமாக, நீங்கள் ஒரு அமைக்க CSS ஐப் பயன்படுத்தலாம் min-height மற்றும் max-height textarea க்கு, மற்றும் JavaScript ஆனது பயனர் வகைகளுக்கு ஏற்றவாறு உயரத்தை மாறும் வகையில் சரிசெய்யும். இது மிகவும் நெகிழ்வான மற்றும் பயனர்-நட்பு உள்ளீட்டு பகுதியை வழங்குகிறது, அதே நேரத்தில் உள்ளிடப்பட்ட உரையின் அளவைப் பொருட்படுத்தாமல் படிவ அமைப்பு அப்படியே இருப்பதை உறுதி செய்கிறது
Textarea அளவை மாற்றுவது பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்
- டெக்ஸ்ட் ஏரியா மறுஅளவிடப்படுவதை எவ்வாறு தடுப்பது?
- CSS சொத்தை அமைக்கவும் resize: none; உரை பகுதியில்.
- இன்லைன் CSS மூலம் அளவை மாற்றுவதை நான் முடக்க முடியுமா?
- ஆம், சேர் style="resize: none;" நேரடியாக <textarea> குறிச்சொல்.
- ஜாவாஸ்கிரிப்ட் மூலம் அளவை மாற்றுவதைக் கட்டுப்படுத்த முடியுமா?
- ஆம், பயன்படுத்தவும் document.getElementById உரைப்பகுதியைத் தேர்ந்தெடுத்து அதை அமைக்கவும் style.resize சொத்து 'none'.
- டெக்ஸ்ட் ஏரியாவில் உள்ள எழுத்துகளின் எண்ணிக்கையை எப்படிக் கட்டுப்படுத்துவது?
- சேர் maxlength பண்பு <textarea> குறிச்சொல்.
- உள்ளடக்கத்தின் அடிப்படையில் நான் உரைப்பகுதியை தானாக மறுஅளவிடலாமா?
- ஆம், போன்ற CSS பண்புகளின் கலவையைப் பயன்படுத்தவும் min-height மற்றும் max-height ஜாவாஸ்கிரிப்ட் மூலம் உயரத்தை மாறும் வகையில் சரிசெய்யவும்.
- டெக்ஸ்ட் ஏரியா மறுஅளவிடுதலை நான் ஏன் முடக்க வேண்டும்?
- உங்கள் படிவம் அல்லது இணையப் பக்கத்தின் தளவமைப்பு மற்றும் வடிவமைப்பு நிலைத்தன்மையை பராமரிக்க.
- உரைப்பகுதியை வடிவமைக்க வேறு வழிகள் உள்ளதா?
- ஆம், எழுத்துரு அமைத்தல், திணிப்பு மற்றும் பார்டர் பண்புகள் போன்ற தோற்றத்தைக் கட்டுப்படுத்த CSSஐப் பயன்படுத்தலாம்.
- ஒரு திசையில் மட்டும் அளவை மாற்றுவதை நான் முடக்க முடியுமா?
- ஆம், அமைக்கவும் resize: vertical; அல்லது resize: horizontal; ஒரு திசையில் மறுஅளவிடுதலை முடக்க.
- டெக்ஸ்ட் ஏரியாவின் இயல்புநிலை மறுஅளவிடல் நடத்தை என்ன?
- இயல்பாக, ஒரு உரைப்பகுதியை பயனர் கிடைமட்டமாகவும் செங்குத்தாகவும் மாற்றலாம்.
Textarea மறுஅளவிடுதலை முடக்குவது பற்றிய இறுதி எண்ணங்கள்
டெக்ஸ்ட் ஏரியாவின் மறுஅளவிடக்கூடிய சொத்தை முடக்குவது, உங்கள் வலைப் படிவங்களின் தளவமைப்பு மற்றும் வடிவமைப்பு நிலைத்தன்மையைப் பராமரிக்க எளிய மற்றும் பயனுள்ள வழியாகும். CSS, இன்லைன் ஸ்டைல்கள் அல்லது ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதன் மூலம், உங்கள் உரைப் பகுதிகள் அளவு நிலையானதாக இருப்பதை உறுதிசெய்யலாம், மேலும் யூகிக்கக்கூடிய மற்றும் கட்டுப்படுத்தப்பட்ட பயனர் அனுபவத்தை வழங்குகிறது. இந்த முறைகள் செயல்படுத்த எளிதானது மற்றும் பல்வேறு வலை அபிவிருத்தி தேவைகளுக்கு ஏற்ப மாற்றியமைக்கப்படலாம்.