à²à²¨à³ -webkit-user-select à²à²¸à³à²¤à²¿?

à²¬à²³à²¸à²¿ -webkit-user-select, -moz-user-select, -ms-user-select, à²®à²¤à³à²¤à³ user-select à²à²à³à²à²¿à²à³ à²à³à²£à²²à²à³à²·à²£à²à²³à³.

ಪಠ್ಯ ಆಯ್ಕೆಯ ಹೈಲೈಟ್

Lucas Simon

ಬುಧವಾರ, ಜೂನ್ 12, 2024 04:03:33 ಅಪರಾಹ್ನ

ಅನಗತ್ಯ ಪಠ್ಯ ಆಯ್ಕೆಯನ್ನು ತಡೆಯುವುದು

ಸ್ಟಾಕ್ ಓವರ್‌ಫ್ಲೋ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿರುವ (ಪ್ರಶ್ನೆಗಳು, ಟ್ಯಾಗ್‌ಗಳು ಮತ್ತು ಬಳಕೆದಾರರು) ಬಟನ್‌ಗಳಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಆಂಕರ್‌ಗಳಿಗೆ, ಬಳಕೆದಾರರು ಆಕಸ್ಮಿಕವಾಗಿ ಪಠ್ಯವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿದಾಗ ಅದು ನಿರಾಶಾದಾಯಕವಾಗಿರುತ್ತದೆ. ಈ ಅಂಶಗಳನ್ನು ನ್ಯಾವಿಗೇಷನ್ ಅಥವಾ ಕ್ರಿಯೆಗಳಿಗೆ ಬಳಸಿದಾಗ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಪಠ್ಯ ಆಯ್ಕೆಯು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿರುವುದಿಲ್ಲ.

ಪಠ್ಯ ಆಯ್ಕೆಯನ್ನು ತಡೆಯಲು 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 ವರ್ಗ.

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 ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ಪೂರ್ವಪ್ರತ್ಯಯಗಳ ಜೊತೆಗೆ ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪಠ್ಯ ಆಯ್ಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು ದೃಢವಾದ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದಾಗ, ಈ ತಂತ್ರಗಳು ಬಟನ್‌ಗಳು ಅಥವಾ ಟ್ಯಾಬ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಂಶಗಳಲ್ಲಿ ಆಕಸ್ಮಿಕ ಪಠ್ಯ ಆಯ್ಕೆಯನ್ನು ತಡೆಯುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ, ಅನಗತ್ಯ ಹೈಲೈಟ್ ಮಾಡದೆಯೇ ಸುಗಮ ಸಂವಾದವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಪಠ್ಯ ಆಯ್ಕೆಯ ಹೈಲೈಟ್ ಮಾಡುವಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಮಾರ್ಗದರ್ಶಿ