à´à´¨àµà´¤à´¾à´£àµ -webkit-user-select à´¸àµà´µà´¤àµà´¤àµ?

à´à´ªà´¯àµà´¾à´à´¿à´àµà´àµà´ -webkit-user-select, -moz-user-select, -ms-user-select, à´à´ªàµà´ªà´ user-select à´ªàµà´°àµà´ªàµà´ªàµ¼à´àµà´à´¿à´àµ¾ à´à´°àµà´®à´¿à´àµà´àµ.

ടെക്‌സ്‌റ്റ്

Lucas Simon

2024, ജൂൺ 12, ബുധനാഴ്‌ച 4:14:45 PM

അനാവശ്യ വാചകം തിരഞ്ഞെടുക്കുന്നത് തടയുന്നു

സ്റ്റാക്ക് ഓവർഫ്ലോ സൈഡ്‌ബാറിലെ (ചോദ്യങ്ങൾ, ടാഗുകൾ, ഉപയോക്താക്കൾ) പോലുള്ള ബട്ടണുകൾ പോലെ പ്രവർത്തിക്കുന്ന ആങ്കറുകൾക്ക്, ഉപയോക്താക്കൾ ആകസ്മികമായി ടെക്‌സ്‌റ്റ് ഹൈലൈറ്റ് ചെയ്യുമ്പോൾ അത് നിരാശാജനകമായിരിക്കും. ഈ ഘടകങ്ങൾ നാവിഗേഷനോ പ്രവർത്തനങ്ങൾക്കോ ഉപയോഗിക്കുമ്പോൾ, ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഉദ്ദേശിക്കാത്തയിടത്ത് ഇത് പലപ്പോഴും സംഭവിക്കുന്നു.

ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയാൻ JavaScript സൊല്യൂഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നുണ്ടെങ്കിലും, CSS ഒരു സ്റ്റാൻഡേർഡ്-കംപ്ലയൻ്റ് രീതി നൽകുന്നുണ്ടോ എന്ന് അറിയുന്നത് പ്രയോജനകരമാണ്. ഈ ലേഖനം CSS ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് സെലക്ഷൻ ഹൈലൈറ്റിംഗ് എങ്ങനെ അപ്രാപ്‌തമാക്കാമെന്ന് പര്യവേക്ഷണം ചെയ്യുകയും ഈ പ്രഭാവം നേടുന്നതിനുള്ള മികച്ച രീതികൾ ചർച്ച ചെയ്യുകയും ചെയ്യുന്നു.

കമാൻഡ്	വിവരണം
-webkit-user-select	സഫാരി ബ്രൗസറുകളിൽ ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനുള്ള CSS പ്രോപ്പർട്ടി.
-moz-user-select	ഫയർഫോക്സ് ബ്രൗസറുകളിൽ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനുള്ള CSS പ്രോപ്പർട്ടി.
-ms-user-select	Internet Explorer 10+-ൽ ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനുള്ള CSS പ്രോപ്പർട്ടി.
user-select	ആധുനിക ബ്രൗസറുകളിൽ ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള സ്റ്റാൻഡേർഡ് CSS പ്രോപ്പർട്ടി.
onselectstart	ഒരു ഘടകത്തിലെ ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയാൻ JavaScript ഇവൻ്റ് ഹാൻഡ്‌ലർ.
querySelectorAll	ഒരു നിർദ്ദിഷ്‌ട സെലക്ടർമാരുടെ ഗ്രൂപ്പുമായി പൊരുത്തപ്പെടുന്ന എല്ലാ ഘടകങ്ങളും തിരഞ്ഞെടുക്കുന്നതിനുള്ള JavaScript രീതി.

ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള സ്ക്രിപ്റ്റുകൾ മനസ്സിലാക്കുന്നു

CSS ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റിംഗ് പ്രവർത്തനരഹിതമാക്കാൻ, ഞങ്ങൾ പ്രയോഗിക്കുന്നു -webkit-user-select, -moz-user-select, -ms-user-select, ഒപ്പം user-select പ്രോപ്പർട്ടികൾ. ക്രോസ്-ബ്രൗസർ അനുയോജ്യത ഉറപ്പാക്കിക്കൊണ്ട് ഈ പ്രോപ്പർട്ടികൾ വ്യത്യസ്ത ബ്രൗസറുകൾക്ക് അനുയോജ്യമാണ്. ഈ പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കുന്നതിലൂടെ none, ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ അപ്രാപ്‌തമാക്കി, ഇത് ഉപയോഗിച്ച് ഘടകങ്ങളിൽ ടെക്‌സ്‌റ്റ് ഹൈലൈറ്റ് ചെയ്യുന്നതിൽ നിന്ന് ഉപയോക്താക്കളെ തടയുന്നു no-select ക്ലാസ്.

JavaScript ഉദാഹരണത്തിൽ, 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 പരിഹാരം

/* 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 ആവശ്യമുള്ള ഘടകങ്ങൾക്കായി.
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാൻ JavaScript രീതി ഉണ്ടോ?
അതെ, സജ്ജീകരിക്കുന്നതിലൂടെ onselectstart മടങ്ങിവരാനുള്ള സംഭവം false ടാർഗെറ്റുചെയ്‌ത ഘടകങ്ങളിൽ.
എന്താണ് -webkit-user-select സ്വത്ത്?
Safari, Chrome ബ്രൗസറുകളിൽ ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാൻ ഉപയോഗിക്കുന്ന ഒരു CSS പ്രോപ്പർട്ടിയാണിത്.
എനിക്ക് ഉപയോഗിക്കാമോ pointer-events ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയാൻ?
അതെ, ക്രമീകരണം pointer-events വരെ none ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയാനും മറ്റ് ഇടപെടലുകളെ പ്രവർത്തനരഹിതമാക്കാനും കഴിയും.
എന്താണ് ചെയ്യുന്നത് draggable ആട്രിബ്യൂട്ട് ചെയ്യുക?
ദി draggable ആട്രിബ്യൂട്ട്, സജ്ജമാക്കുമ്പോൾ false, ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിൽ നിന്നും വലിച്ചിടുന്നതിൽ നിന്നും തടയുന്നു.
CSS ഉള്ള എല്ലാ ബ്രൗസറുകളും ടാർഗെറ്റ് ചെയ്യാൻ എന്തെങ്കിലും വഴിയുണ്ടോ?
ഉപയോഗിക്കുക -webkit-user-select, -moz-user-select, -ms-user-select, ഒപ്പം user-select പ്രോപ്പർട്ടികൾ ഒരുമിച്ച്.
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിന് എന്തെങ്കിലും ദോഷങ്ങളുണ്ടോ?
ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നത് സംവേദനാത്മക ഘടകങ്ങളുടെ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തും എന്നാൽ ചില ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമതയെ തടസ്സപ്പെടുത്തിയേക്കാം.
നിർദ്ദിഷ്ട ഘടകങ്ങൾക്ക് മാത്രം ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കാനാകുമോ?
അതെ, ബട്ടണുകൾ അല്ലെങ്കിൽ ടാബുകൾ പോലുള്ള നിർദ്ദിഷ്‌ട ഘടകങ്ങളിലേക്ക് നിങ്ങൾക്ക് പ്രോപ്പർട്ടികൾ അല്ലെങ്കിൽ ഇവൻ്റ് ഹാൻഡ്‌ലറുകൾ പ്രയോഗിക്കാൻ കഴിയും.
ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള മികച്ച സമ്പ്രദായങ്ങൾ ഏതാണ്?
ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയ്ക്കായി CSS, JavaScript രീതികൾ സംയോജിപ്പിച്ച് ഉപയോഗക്ഷമത വിട്ടുവീഴ്ച ചെയ്യപ്പെടുന്നില്ലെന്ന് ഉറപ്പാക്കുക.

ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ പ്രവർത്തനരഹിതമാക്കുന്നതിനെക്കുറിച്ചുള്ള അന്തിമ ചിന്തകൾ

ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റ് ചെയ്യുന്നത് തടയുന്നത് ഇൻ്ററാക്ടീവ് വെബ് ഘടകങ്ങളുടെ ഉപയോഗക്ഷമത വർദ്ധിപ്പിക്കുന്നു. പോലുള്ള CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നു user-select ബ്രൗസർ-നിർദ്ദിഷ്ട പ്രിഫിക്സുകൾക്കൊപ്പം എല്ലാ പ്രധാന ബ്രൗസറുകളിലും അനുയോജ്യത ഉറപ്പാക്കുന്നു. കൂടാതെ, ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കൽ നിയന്ത്രിക്കാൻ JavaScript ഉൾപ്പെടുത്തുന്നത് ശക്തമായ ഒരു പരിഹാരം നൽകുന്നു. ശരിയായി നടപ്പിലാക്കുമ്പോൾ, ബട്ടണുകളോ ടാബുകളോ ആയി പ്രവർത്തിക്കുന്ന ഘടകങ്ങളിൽ ആകസ്മികമായ ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കുന്നത് തടയുന്നതിലൂടെയും അനാവശ്യ ഹൈലൈറ്റ് ചെയ്യാതെ സുഗമമായ ഇടപെടൽ ഉറപ്പാക്കുന്നതിലൂടെയും ഈ ടെക്‌നിക്കുകൾ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു.

ടെക്‌സ്‌റ്റ് തിരഞ്ഞെടുക്കൽ ഹൈലൈറ്റിംഗ് പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള ഗൈഡ്