ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള ആമുഖം
ബട്ടണുകൾ പോലെ പ്രവർത്തിക്കുന്ന ആങ്കർമാർക്ക്, സ്റ്റാക്ക് ഓവർഫ്ലോയുടെ സൈഡ്‌ബാറിലെ ബട്ടണുകൾ, ചോദ്യങ്ങൾ, ടാഗുകൾ, ഉപയോക്താക്കൾ എന്നിങ്ങനെയുള്ള ബട്ടണുകൾ, ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റ് ചെയ്യുന്നത് തടയുന്നത് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തും. ആകസ്മികമായ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഉപയോക്താക്കളുടെ ശ്രദ്ധ തിരിക്കുന്നില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
JavaScript സൊല്യൂഷനുകൾ നിലവിലുണ്ടെങ്കിലും, ഒരു CSS സ്റ്റാൻഡേർഡ് രീതി കണ്ടെത്തുന്നത് പലപ്പോഴും അഭികാമ്യമാണ്. ഒരു CSS-അനുയോജ്യമായ സമീപനം ലഭ്യമാണോയെന്നും സ്റ്റാൻഡേർഡ് സൊല്യൂഷൻ നിലവിലില്ലെങ്കിൽ ഏതൊക്കെ മികച്ച രീതികളാണെന്നും ഈ ലേഖനം പര്യവേക്ഷണം ചെയ്യുന്നു.
| കമാൻഡ് | വിവരണം |
|---|---|
| -webkit-user-select | ഘടകത്തിൻ്റെ വാചകം Chrome, Safari, Opera എന്നിവയിൽ തിരഞ്ഞെടുക്കാനാകുമോ എന്ന് വ്യക്തമാക്കുന്നു. |
| -moz-user-select | ഫയർഫോക്സിൽ മൂലകത്തിൻ്റെ വാചകം തിരഞ്ഞെടുക്കാനാകുമോ എന്ന് വ്യക്തമാക്കുന്നു. |
| -ms-user-select | ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിലും എഡ്ജിലും മൂലകത്തിൻ്റെ വാചകം തിരഞ്ഞെടുക്കാനാകുമോ എന്ന് വ്യക്തമാക്കുന്നു. |
| user-select | ആധുനിക ബ്രൗസറുകളിൽ മൂലകത്തിൻ്റെ വാചകം തിരഞ്ഞെടുക്കാനാകുമോ എന്ന് വ്യക്തമാക്കുന്നു. |
| addEventListener | ഇവൻ്റ് ടാർഗെറ്റിൽ ഒരു നിർദ്ദിഷ്ട ശ്രോതാവിനെ രജിസ്റ്റർ ചെയ്യുന്നു. |
| preventDefault | ഇവൻ്റിൻ്റെ ഡിഫോൾട്ട് പ്രവർത്തനം തടയുന്നു. |
| selectstart | ഒരു ഉപയോക്താവ് ഒരു ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കാൻ തുടങ്ങുമ്പോൾ ഫയർ ചെയ്യുന്നു. |
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള പരിഹാരം മനസ്സിലാക്കുന്നു
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാൻ CSS സ്ക്രിപ്റ്റ് നിരവധി പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നു. ദി -webkit-user-select, -moz-user-select, ഒപ്പം -ms-user-select Chrome, Safari, Opera, Firefox, Internet Explorer, Edge എന്നിവയിൽ യഥാക്രമം ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയുന്ന ബ്രൗസർ-നിർദ്ദിഷ്ട കമാൻഡുകളാണ് പ്രോപ്പർട്ടികൾ. ദി user-select ആധുനിക ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്ന ഒരു സ്റ്റാൻഡേർഡ് പതിപ്പാണ് പ്രോപ്പർട്ടി. ഈ കമാൻഡുകൾ ബട്ടണുകളായി പ്രവർത്തിക്കുന്ന ആങ്കർ ടാഗുകളിൽ പ്രയോഗിക്കുന്നു, ഉപയോക്താക്കൾക്ക് ബോധപൂർവ്വം ടെക്സ്റ്റ് ഹൈലൈറ്റ് ചെയ്യാൻ കഴിയില്ലെന്ന് ഉറപ്പാക്കാൻ, അങ്ങനെ ബട്ടണുകൾ പോലുള്ള പ്രവർത്തനം കാഴ്ച തടസ്സമില്ലാതെ നിലനിർത്തുന്നു.
ആങ്കർ ഘടകങ്ങളിലേക്ക് ഇവൻ്റ് ലിസണർമാരെ ചേർത്തുകൊണ്ട് JavaScript സ്ക്രിപ്റ്റ് ഉപയോക്തൃ അനുഭവം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു. ദി addEventListener രീതി അറ്റാച്ചുചെയ്യുന്നു mousedown ഒപ്പം selectstart മൂലകങ്ങളിലേക്കുള്ള ഇവൻ്റുകൾ, ഡിഫോൾട്ട് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുന്നത് തടയുന്നു preventDefault. ക്ലിക്കുചെയ്‌ത് ഡ്രാഗ് ചെയ്‌ത് ഒരു ഉപയോക്താവ് ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കാൻ ശ്രമിച്ചാലും, ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ബ്ലോക്ക് ചെയ്യപ്പെടുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു. CSS-ഉം JavaScript-ഉം ഉപയോഗിച്ചുള്ള ഈ സംയോജിത സമീപനം വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപയോക്തൃ ഇടപെടലുകളിലുമുള്ള അനാവശ്യ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ശക്തമായ പ്രതിരോധം ഉറപ്പാക്കുന്നു.
CSS ഉള്ള ആങ്കർ ബട്ടണുകളിൽ വാചകം തിരഞ്ഞെടുക്കുന്നത് തടയുന്നു
CSS പരിഹാരം
/* CSS to disable text selection */a.button {-webkit-user-select: none; /* Chrome, Safari, Opera */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */}/* Apply the class to anchor tags acting as buttons */a.button {display: inline-block;padding: 10px 20px;text-decoration: none;background-color: #007bff;color: white;border-radius: 5px;}
ആങ്കർ ബട്ടണുകളിൽ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ JavaScript ഉപയോഗിക്കുന്നു
JavaScript പരിഹാരം
<script>// JavaScript to disable text selection for specific elementsdocument.querySelectorAll('a.button').forEach(function(el) {el.addEventListener('mousedown', function(e) {e.preventDefault(); // Prevents text selection on mousedown});el.addEventListener('selectstart', function(e) {e.preventDefault(); // Prevents text selection on drag});});</script>
ബ്രൗസർ അനുയോജ്യതയും മികച്ച രീതികളും പര്യവേക്ഷണം ചെയ്യുന്നു
ആങ്കർ ഘടകങ്ങൾക്കായി ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റിംഗ് പ്രവർത്തനരഹിതമാക്കുമ്പോൾ പരിഗണിക്കേണ്ട മറ്റൊരു പ്രധാന വശം ബ്രൗസർ അനുയോജ്യതയും ഫാൾബാക്ക് സൊല്യൂഷനുകളുമാണ്. അതേസമയം user-select ആധുനിക ബ്രൗസറുകളിൽ പ്രോപ്പർട്ടി വ്യാപകമായി പിന്തുണയ്ക്കുന്നു, എല്ലാ പതിപ്പുകളിലും പ്ലാറ്റ്‌ഫോമുകളിലും അനുയോജ്യത ഉറപ്പാക്കുന്നത് വെല്ലുവിളിയാണ്. പഴയ ബ്രൗസറുകളിലോ നിർദ്ദിഷ്ട പതിപ്പുകളിലോ, ചില പ്രോപ്പർട്ടികൾ തിരിച്ചറിഞ്ഞേക്കില്ല, ഇത് പൊരുത്തമില്ലാത്ത പെരുമാറ്റത്തിലേക്ക് നയിക്കുന്നു. വിവിധ ബ്രൗസറുകളിൽ ഉടനീളം സമഗ്രമായ പരിശോധന നടപ്പിലാക്കുന്നത് ഉദ്ദേശിച്ച പ്രവർത്തനം സ്ഥിരമായി കൈവരിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിർണായകമാണ്.
CSS, JavaScript സൊല്യൂഷനുകൾക്ക് പുറമേ, നിങ്ങളുടെ കോഡ് വൃത്തിയുള്ളതും നന്നായി രേഖപ്പെടുത്തപ്പെട്ടതും പോലെയുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നത് നല്ലതാണ്. നിങ്ങളുടെ CSS, JavaScript ഫയലുകൾക്കുള്ളിലെ കമൻ്റുകൾ ഉപയോഗിക്കുന്നത് മറ്റ് ഡെവലപ്പർമാർക്ക് വ്യക്തതയും മനസ്സിലാക്കാനുള്ള എളുപ്പവും നിലനിർത്താൻ സഹായിക്കുന്നു. കൂടാതെ, ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നത് നിങ്ങളുടെ വെബ് പേജിലെ മറ്റ് സംവേദനാത്മക ഘടകങ്ങളുമായി ഇടപെടുന്നില്ലെന്ന് ഉറപ്പാക്കിക്കൊണ്ട് ഉപയോക്തൃ അനുഭവം പരിഗണിക്കുക.
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനെക്കുറിച്ചുള്ള പതിവ് ചോദ്യങ്ങൾ
- Chrome-ൽ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കുന്നത് എങ്ങനെ പ്രവർത്തനരഹിതമാക്കാം?
- ഉപയോഗിക്കുക -webkit-user-select Chrome-ൽ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനുള്ള പ്രോപ്പർട്ടി.
- ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാൻ സാർവത്രിക CSS പ്രോപ്പർട്ടി ഉണ്ടോ?
- അതെ, ദി user-select മിക്ക ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്ന ഒരു സാർവത്രിക രീതിയാണ് പ്രോപ്പർട്ടി.
- JavaScript ഉപയോഗിച്ച് എനിക്ക് ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനാകുമോ?
- അതെ, ഉപയോഗിച്ച് addEventListener ഒപ്പം preventDefault ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഇവൻ്റുകൾ തടയുന്നതിനുള്ള രീതികൾ.
- വ്യത്യസ്ത ബ്രൗസറുകൾക്കുള്ള പ്രത്യേക പ്രോപ്പർട്ടികൾ എന്തൊക്കെയാണ്?
- ഉപയോഗിക്കുക -webkit-user-select Chrome, Safari, Opera എന്നിവയ്‌ക്കായി, -moz-user-select ഫയർഫോക്സിനായി, ഒപ്പം -ms-user-select ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിനും എഡ്ജിനും.
- ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നത് പ്രവേശനക്ഷമതയെ ബാധിക്കുമോ?
- ഇതിന് കഴിയും, അതിനാൽ കീബോർഡ് നാവിഗേഷനിലോ സ്‌ക്രീൻ റീഡറുകളിലോ പ്രവർത്തനം ഇടപെടുന്നില്ലെന്ന് ഉറപ്പാക്കേണ്ടത് പ്രധാനമാണ്.
- എനിക്ക് എല്ലാ ഘടകങ്ങളിലും ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനാകുമോ?
- അതെ, നിങ്ങൾക്ക് അപേക്ഷിക്കാം user-select നിങ്ങളുടെ CSS ലെ ഏതെങ്കിലും ഘടകത്തിലേക്കുള്ള പ്രോപ്പർട്ടി.
- ഒരു ഉപയോക്താവിന് വാചകം പകർത്തണമെങ്കിൽ എന്തുചെയ്യും?
- പകർത്തേണ്ട ടെക്‌സ്‌റ്റിനെ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്ന പ്രോപ്പർട്ടികൾ ബാധിച്ചിട്ടില്ലെന്ന് ഉറപ്പാക്കുക.
- CSS കൂടാതെ JavaScript ഉപയോഗിക്കേണ്ടതുണ്ടോ?
- JavaScript ഉപയോഗിക്കുന്നത് അധിക കരുത്ത് നൽകാനും CSS മുഖേന മാത്രം ഉൾപ്പെടാത്ത എഡ്ജ് കേസുകൾ കൈകാര്യം ചെയ്യാനും കഴിയും.
- ക്രോസ്-ബ്രൗസർ അനുയോജ്യത എനിക്ക് എങ്ങനെ ഉറപ്പാക്കാനാകും?
- വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം നിങ്ങളുടെ നിർവ്വഹണം പരിശോധിക്കുകയും യൂണിവേഴ്‌സലിനൊപ്പം ബ്രൗസർ-നിർദ്ദിഷ്ട പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുകയും ചെയ്യുക user-select സ്വത്ത്.
ടെക്സ്റ്റ് സെലക്ഷൻ ഹൈലൈറ്റിംഗ് പ്രവർത്തനരഹിതമാക്കുന്നതിനെക്കുറിച്ചുള്ള അന്തിമ ചിന്തകൾ
ഉപസംഹാരമായി, ബട്ടണുകളായി പ്രവർത്തിക്കുന്ന ആങ്കർ ഘടകങ്ങൾക്കായി ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റിംഗ് പ്രവർത്തനരഹിതമാക്കുന്നത് അനാവശ്യ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയുന്നതിലൂടെ ഉപയോക്തൃ അനുഭവം ഗണ്യമായി മെച്ചപ്പെടുത്തും. പോലുള്ള CSS ഗുണങ്ങളുടെ സംയോജനം ഉപയോഗിക്കുന്നു user-select കൂടാതെ JavaScript ഇവൻ്റ് ലിസണർമാർ സമഗ്രമായ ക്രോസ്-ബ്രൗസർ അനുയോജ്യത ഉറപ്പാക്കുന്നു.
CSS പ്രോപ്പർട്ടികൾ മിക്ക ആധുനിക ബ്രൗസറുകളും കൈകാര്യം ചെയ്യുമ്പോൾ, പഴയതോ കുറഞ്ഞതോ ആയ ബ്രൗസറുകൾക്ക് JavaScript കൂടുതൽ കരുത്തുറ്റത നൽകുന്നു. ഈ സംയോജിത സമീപനം ഉപയോക്താക്കൾക്ക് ആകസ്മികമായ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കലിൻ്റെ ശ്രദ്ധ വ്യതിചലിപ്പിക്കാതെ തടസ്സമില്ലാത്ത ഇടപെടൽ അനുഭവിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് കൂടുതൽ വൃത്തിയുള്ളതും കൂടുതൽ പ്രൊഫഷണലായതുമായ വെബ് ഡിസൈൻ ഉണ്ടാക്കുന്നു.