Comment rendre le texte HTML non sélectionnable [dupliquer]
cette question a déjà une réponse ici:
j'aimerais ajouter du texte à ma page Web comme étiquette et le rendre non sélectionnable.
en d'autres termes, quand le curseur de la souris est au-dessus du texte je voudrais comme pour ne pas se transformer en un texte en sélectionnant le curseur à tous.
un bon exemple de ce que j'essaie de réaliser est les boutons de ce site web (Questions,Tags,utilisateurs,...)
4 réponses
vous ne pouvez pas faire cela avec simple vanilla HTML, donc JSF ne peut pas faire beaucoup pour vous ici aussi.
si vous ciblez navigateurs décents seulement, alors faites juste usage de 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>
si vous souhaitez couvrir les navigateurs plus anciens, alors considérez ce repli JavaScript:
<!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>
si vous utilisez déjà jQuery , alors voici un autre exemple ce qui ajoute une nouvelle fonction disableSelection() à jQuery pour que vous puissiez l'utiliser n'importe où dans votre code jQuery:
<!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>
personne ici n'a posté une réponse avec toutes les variations CSS correctes, donc ici il est:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
la solution moderne complète à votre problème est purement basée sur CSS, mais notez que les navigateurs plus anciens ne le supporteront pas, dans ce cas, vous aurez besoin de retomber à des solutions telles que les autres ont fourni.
Donc, en pur CSS:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cependant le curseur de la souris va encore changer pour un caret lorsque vous passez le texte de l'élément, donc vous ajoutez à cela:
cursor: default;
CSS moderne est assez élégant.
j'ai modifié le plugin jQuery posté ci-dessus pour qu'il fonctionne sur des éléments en direct.
(function ($) {
$.fn.disableSelection = function () {
return 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; };
}
});
};
})(jQuery);
alors vous pourriez ainsi quelque chose comme:
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
});