தேவையற்ற உரைத் தேர்வைத் தடுக்கிறது
ஸ்டாக் ஓவர்ஃப்ளோ பக்கப்பட்டியில் (கேள்விகள், குறிச்சொற்கள் மற்றும் பயனர்கள்) போன்ற பொத்தான்களைப் போன்று செயல்படும் அறிவிப்பாளர்களுக்கு, பயனர்கள் தற்செயலாக உரையை முன்னிலைப்படுத்தும்போது அது வெறுப்பாக இருக்கும். இந்த உறுப்புகள் வழிசெலுத்தல் அல்லது செயல்களுக்குப் பயன்படுத்தப்படும்போது, உரைத் தேர்வு திட்டமிடப்படாத நிலையில் இது அடிக்கடி நிகழ்கிறது.
உரைத் தேர்வைத் தடுப்பதற்கான தீர்வுகளை JavaScript வழங்கும் அதே வேளையில், CSS ஒரு நிலையான-இணக்க முறையை வழங்குகிறதா என்பதை அறிவது நன்மை பயக்கும். இந்தக் கட்டுரை CSSஐப் பயன்படுத்தி உரைத் தேர்வு சிறப்பம்சத்தை எவ்வாறு முடக்குவது என்பதை ஆராய்கிறது மற்றும் இந்த விளைவை அடைவதற்கான சிறந்த நடைமுறைகளைப் பற்றி விவாதிக்கிறது.
| கட்டளை | விளக்கம் |
|---|---|
| -webkit-user-select | சஃபாரி உலாவிகளில் உரைத் தேர்வை முடக்க CSS சொத்து. |
| -moz-user-select | பயர்பாக்ஸ் உலாவிகளில் உரைத் தேர்வை முடக்க CSS சொத்து. |
| -ms-user-select | இன்டர்நெட் எக்ஸ்ப்ளோரர் 10+ இல் உரைத் தேர்வை முடக்க CSS சொத்து. |
| user-select | நவீன உலாவிகளில் உரைத் தேர்வை முடக்குவதற்கான நிலையான CSS பண்பு. |
| onselectstart | ஒரு உறுப்பில் உரைத் தேர்வைத் தடுக்க JavaScript நிகழ்வு ஹேண்ட்லர். |
| querySelectorAll | குறிப்பிட்ட தேர்வாளர்களின் குழுவுடன் பொருந்தக்கூடிய அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்க JavaScript முறை. |
உரைத் தேர்வை முடக்க ஸ்கிரிப்ட்களைப் புரிந்துகொள்வது
CSS ஐப் பயன்படுத்தி உரைத் தேர்வு சிறப்பம்சத்தை முடக்க, நாங்கள் பயன்படுத்துகிறோம் -webkit-user-select, -moz-user-select, -ms-user-select, மற்றும் user-select பண்புகள். இந்த பண்புகள் வெவ்வேறு உலாவிகளுக்கு உதவுகின்றன, குறுக்கு உலாவி இணக்கத்தன்மையை உறுதி செய்கிறது. இந்த பண்புகளை அமைப்பதன் மூலம் none, உரை தேர்வு முடக்கப்பட்டுள்ளது, பயனர்கள் உரையைத் தனிப்படுத்துவதைத் தடுக்கிறது no-select வர்க்கம்.
ஜாவாஸ்கிரிப்ட் எடுத்துக்காட்டில், DOM உள்ளடக்கம் முழுமையாக ஏற்றப்பட்டவுடன் செயல்படும் ஆவணத்தில் நிகழ்வு கேட்பவரைச் சேர்ப்போம். தி querySelectorAll முறை அனைத்து கூறுகளையும் தேர்ந்தெடுக்கிறது no-select வர்க்கம். தேர்ந்தெடுக்கப்பட்ட ஒவ்வொரு உறுப்புக்கும், தி onselectstart நிகழ்வு திரும்புவதற்கு மேலெழுதப்பட்டது false, உரைத் தேர்வைத் தடுக்கிறது. CSS மற்றும் JavaScript ஆகியவற்றின் இந்த கலவையானது வெவ்வேறு உலாவிகள் மற்றும் காட்சிகளில் உரைத் தேர்வை முடக்குவதற்கான வலுவான தீர்வை உறுதி செய்கிறது.
உரைத் தேர்வை முடக்க CSS முறை
உரைத் தேர்வை முடக்குவதற்கு CSS ஐப் பயன்படுத்துதல்
/* CSS to disable text selection */.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}
உரைத் தேர்வைத் தடுப்பதற்கான ஜாவாஸ்கிரிப்ட் அணுகுமுறை
உரைத் தேர்வை முடக்குவதற்கான ஜாவாஸ்கிரிப்ட் தீர்வு
/* JavaScript to disable text selection */document.addEventListener('DOMContentLoaded', (event) => {document.querySelectorAll('.no-select').forEach((element) => {element.onselectstart = function() {return false;};});});
நடைமுறை பயன்பாட்டிற்கான CSS மற்றும் HTML ஐ இணைத்தல்
CSS மற்றும் HTML உடன் நடைமுறை உதாரணம்
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}</style></head><body><div class="no-select">Non-selectable text</div></body></html>
மேலும் தீர்வுகளை ஆராய்தல்
வலைப் பயன்பாடுகளில் உரைத் தேர்வைத் தடுப்பதற்கான மற்றொரு அணுகுமுறை பயன்படுத்தப்படுகிறது draggable HTML இல் பண்புக்கூறு. இந்த பண்பு, அமைக்கப்படும் போது false, உறுப்பைத் தேர்ந்தெடுக்கவோ அல்லது இழுக்கவோ முடியாது என்பதை உறுதிசெய்கிறது, இது பயனர் தொடர்புகளின் மீதான கட்டுப்பாட்டின் மற்றொரு அடுக்கை வழங்குகிறது. சிறப்பம்சமாக அல்லது தற்செயலாக நகர்த்தப்படக் கூடாத பொத்தான்கள் மற்றும் தாவல்கள் போன்ற ஊடாடும் கூறுகளுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.
கூடுதலாக, தி pointer-events CSS சொத்து பயன்படுத்தப்படலாம். அமைப்பதன் மூலம் pointer-events: none, நீங்கள் ஒரு உறுப்பில் உள்ள உரையைத் தேர்ந்தெடுக்க முடியாததாக மாற்றலாம். இருப்பினும், இந்த முறை கிளிக் செய்தல் போன்ற பிற தொடர்புகளையும் முடக்குகிறது, இது எல்லா பயன்பாட்டு நிகழ்வுகளுக்கும் விரும்பத்தக்கதாக இருக்காது. சரியான முறையைத் தேர்ந்தெடுக்கும்போது பயன்பாட்டினை மற்றும் செயல்பாட்டை சமநிலைப்படுத்துவது முக்கியமானது.
பொதுவான கேள்விகள் மற்றும் தீர்வுகள்
- CSS ஐப் பயன்படுத்தி உரைத் தேர்வைத் தடுப்பது எப்படி?
- பயன்படுத்த user-select சொத்து அமைக்கப்பட்டது none விரும்பிய கூறுகளுக்கு.
- உரை தேர்வை முடக்க ஜாவாஸ்கிரிப்ட் முறை உள்ளதா?
- ஆம், அமைப்பதன் மூலம் onselectstart திரும்ப வேண்டிய நிகழ்வு false இலக்கு கூறுகள் மீது.
- என்ன -webkit-user-select சொத்து?
- இது சஃபாரி மற்றும் குரோம் உலாவிகளில் உரைத் தேர்வை முடக்கப் பயன்படும் ஒரு CSS பண்பு.
- நான் பயன்படுத்தி கொள்ளலாமா pointer-events உரை தேர்வை தடுக்கவா?
- ஆம், அமைவு pointer-events செய்ய none உரைத் தேர்வைத் தடுக்கலாம் ஆனால் மற்ற தொடர்புகளையும் முடக்கலாம்.
- என்ன செய்கிறது draggable பண்பு செய்ய?
- தி draggable பண்பு, அமைக்கப்படும் போது false, உறுப்புகள் தேர்ந்தெடுக்கப்படுவதை அல்லது இழுக்கப்படுவதைத் தடுக்கிறது.
- CSS மூலம் அனைத்து உலாவிகளையும் குறிவைக்க வழி உள்ளதா?
- பயன்படுத்த -webkit-user-select, -moz-user-select, -ms-user-select, மற்றும் user-select பண்புகள் ஒன்றாக.
- உரை தேர்வை முடக்குவதில் ஏதேனும் குறைபாடுகள் உள்ளதா?
- உரைத் தேர்வை முடக்குவது ஊடாடும் உறுப்புகளுக்கான பயனர் அனுபவத்தை மேம்படுத்தலாம் ஆனால் சில பயனர்களுக்கு அணுகலைத் தடுக்கலாம்.
- குறிப்பிட்ட உறுப்புகளுக்கு மட்டும் உரைத் தேர்வை முடக்க முடியுமா?
- ஆம், பொத்தான்கள் அல்லது தாவல்கள் போன்ற குறிப்பிட்ட உறுப்புகளுக்கு பண்புகள் அல்லது நிகழ்வு ஹேண்ட்லர்களைப் பயன்படுத்தலாம்.
- உரைத் தேர்வை முடக்குவதற்கான சிறந்த நடைமுறைகள் யாவை?
- குறுக்கு உலாவி இணக்கத்தன்மைக்கான CSS மற்றும் ஜாவாஸ்கிரிப்ட் முறைகளை இணைத்து, பயன்பாட்டினை சமரசம் செய்யவில்லை என்பதை உறுதிப்படுத்தவும்.
உரைத் தேர்வை முடக்குவது பற்றிய இறுதி எண்ணங்கள்
உரை தேர்வு சிறப்பம்சத்தைத் தடுப்பது ஊடாடும் இணைய உறுப்புகளின் பயன்பாட்டினை மேம்படுத்துகிறது. போன்ற CSS பண்புகளைப் பயன்படுத்துதல் user-select உலாவி-குறிப்பிட்ட முன்னொட்டுகளுடன் அனைத்து முக்கிய உலாவிகளிலும் பொருந்தக்கூடிய தன்மையை உறுதி செய்கிறது. கூடுதலாக, உரைத் தேர்வை நிர்வகிக்க ஜாவாஸ்கிரிப்டை இணைப்பது ஒரு வலுவான தீர்வை வழங்குகிறது. இந்த நுட்பங்கள் சரியாகச் செயல்படுத்தப்படும்போது, பொத்தான்கள் அல்லது தாவல்களாகச் செயல்படும் உறுப்புகளில் தற்செயலான உரைத் தேர்வைத் தடுப்பதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துகிறது, தேவையற்ற தனிப்படுத்தல் இல்லாமல் மென்மையான தொடர்புகளை உறுதி செய்கிறது.