Maison >interface Web >tutoriel CSS >Comment empêcher le texte HTML d'être sélectionnable ?
Comment empêcher le texte HTML d'être sélectionnable ?
- Linda Hamiltonoriginal
- 2024-11-10 09:49:02591parcourir
Comment empêcher le texte HTML d'être sélectionnable
Si vous souhaitez intégrer du texte dans votre page Web en tant qu'étiquette et désactiver sa sélection, empêchez le curseur de la souris ne se transforme pas en curseur de sélection de texte lorsque vous survolez le texte.
Solution CSS3 :
Si vous ciblez des navigateurs modernes, utilisez CSS3 :
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<label class="unselectable">Unselectable label</label>
JavaScript Fallback :
Pour les navigateurs plus anciens, une méthode de secours JavaScript peut être utilisée :
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function() { return false; };
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function() { return false; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
Solution jQuery :
Si jQuery est utilisé, étendez ses fonctionnalités avec le code suivant :
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$('label').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!