Je voudrais ajouter du texte à ma page Web en tant qu'étiquette et le rendre non sélectionnable.
En d'autres termes, lorsque le curseur de la souris se trouve sur le texte, je voudrais qu'il ne se transforme pas du tout en curseur de sélection de texte.
Un bon exemple de ce que j'essaie de réaliser est celui des boutons de ce site web (Questions,Tags,Utilisateurs,...)
Vous ne pouvez pas faire cela avec du HTML classique, et JSF ne peut donc pas faire grand-chose pour vous ici non plus.
Votre meilleure chance est d'utiliser JavaScript pour cela. Voici un exemple SSCCE copier/coller/exécuter.
<!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 puis voici un autre exemple qui ajoute une nouvelle fonction disableSelection() à jQuery afin 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>
La solution moderne complète à votre problème est purement basée sur les CSS, mais notez que les anciens navigateurs ne les prennent pas en charge, auquel cas vous devrez vous rabattre sur des solutions telles que celles proposées par les autres.
Donc en CSS pur :
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;Cependant, le curseur de la souris se transformera toujours en caret lorsqu'il se trouvera au-dessus du texte de l'élément :
cursor: default;Le CSS moderne est assez élégant.
J'ai modifié le plugin jQuery posté ci-dessus pour qu'il fonctionne sur les é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 faire quelque chose comme :
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
}); Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
