Permettre la sélection du texte par l'utilisateur
Description
Dernièrement, j'ai eu l'horreur de me retrouver sur un site où on m'empêchait de sélectionner. J'ai donc désactiver le javascript. On me l'empêchait toujours. Et voici donc, CSS3 offre maintenant la possibilité de désactiver la sélection ! (http://help.dottoro.com/lcrlukea.php)
J'ai donc repris une astuce trouvé sur l'éditeurjavascript qui consistait à être un lien qui permet de réactiver la sélection, et tout ce qui va avec. Mais je l'ai amélioré à en mourrir, et pour l'instant je n'ai pas encore trouvé de code qui résiste au lien. Toutefois certains sont plus difficile que d'autre. J'y viendrai plus loin.
Donc, le code permet de supprimer les méthodes classiques (changement d'événement en "return false"), les nouveaux CSS (::selection et (-moz-/o-/khtml-/webkit-)user-select) et les nouveaux attributs (unselectable), et cc en plus de remettre la valeur css de overflow à sa valeur originale, car oui, des fois, certains la modifie. Deplus, j'ai fait en sorte que lorsque on remet le CSS ::selection à défaut, ce soit la couleur originale et la couleur de texte originale, peu importe le navigateur.
Mais la méthode est en 2 étapes. On met le lien dans la barre d'étape 1 fois et on fait ENTRER = 1 Étape. Normalement, cela suffit. Mais parfois, il faut faire entrer une deuxième étape. Dans ce cas-là, on refait exactement la même chose mais une petit alerte nous demandera de valider. C'est que le script va parcourir TOUS les éléments et va supprimer TOUS les événements qui peuvent utiliser pour empêcher la sélection.
J'ai mis les liens dans la section source en raison du bug des espaces dans les URL.
EDIT : Fourni maintenant avec une extension Safari et la source de cette extension ;)
Bon... ce n'est pas l'avancement du siècle. Et il y a encore quelques bugs avec IE mais heureusement ces bugs empêche de supprimer des trucs qu'il ne supporte pas. Mais cela peut être parfois utile pour les sites qui ne comprennent pas encore en compte le respect de l'utilisateur
EDIT : J'ai mis à jour car j'avais oublié le préfixe "javascript:" en plus d'ajouter un zip où le lien est déjà fait pour vous.
J'ai donc repris une astuce trouvé sur l'éditeurjavascript qui consistait à être un lien qui permet de réactiver la sélection, et tout ce qui va avec. Mais je l'ai amélioré à en mourrir, et pour l'instant je n'ai pas encore trouvé de code qui résiste au lien. Toutefois certains sont plus difficile que d'autre. J'y viendrai plus loin.
Donc, le code permet de supprimer les méthodes classiques (changement d'événement en "return false"), les nouveaux CSS (::selection et (-moz-/o-/khtml-/webkit-)user-select) et les nouveaux attributs (unselectable), et cc en plus de remettre la valeur css de overflow à sa valeur originale, car oui, des fois, certains la modifie. Deplus, j'ai fait en sorte que lorsque on remet le CSS ::selection à défaut, ce soit la couleur originale et la couleur de texte originale, peu importe le navigateur.
Mais la méthode est en 2 étapes. On met le lien dans la barre d'étape 1 fois et on fait ENTRER = 1 Étape. Normalement, cela suffit. Mais parfois, il faut faire entrer une deuxième étape. Dans ce cas-là, on refait exactement la même chose mais une petit alerte nous demandera de valider. C'est que le script va parcourir TOUS les éléments et va supprimer TOUS les événements qui peuvent utiliser pour empêcher la sélection.
J'ai mis les liens dans la section source en raison du bug des espaces dans les URL.
EDIT : Fourni maintenant avec une extension Safari et la source de cette extension ;)
Source / Exemple :
Quelques exemples de site où cela fonctionne en 1 étapes : http://css-tricks.com/examples/DifferentSelectionColors/ http://www.editeurjavascript.com/scripts/scripts_autres_2_48.php http://www.editeurjavascript.com/scripts/scripts_autres_2_138.php Un exemple de site où cela fonctionne en 2 étapes : http://javascript.internet.com/page-details/disable-text-selection.html Copier-coller ceci dans la barre d'adresse : javascript:nfc=function(){if(window.selectiongomore==undefined){var css=document.createElement("style");css.type="text/css";css.media="all";try{css.innerHTML="::-moz-selection { background:Highlight ! important;color:HighlightText ! important;visibility:visible !important;}::selection { background:Highlight !important;color:HighlightText ! important;visibility:visible !important}*{-moz-user-select: auto ! important;-o-user-select: auto ! important;-khtml-user-select: auto ! important; -webkit-user-select: auto !important;user-select: auto !important}body{overflow:auto !important}";document.body.appendChild(css)}catch(e){}document.ondragstart=document.body.ondragstart=null;document.oncontextmenu=document.body.oncontextmenu=null;document.onselectstart=document.body.onselectstart=null;document.onclick=null;document.body.onclick=null;document.onmousedown=document.body.onmousedown=null;document.onmouseup=document.body.onmouseup=null;document.onbeforecopy=document.body.onbeforecopy=null;document.onbeforecut=document.body.onbeforecut=null;document.oncopy=document.body.oncopy=null;tag=document.getElementsByTagName("*");for(var i=0;i<tag.length;i++){tag[i].onbeforecopy=null;tag[i].oncopy=null;tag[i].oncontextmenu=null;tag[i].onselectstart=null;tag[i].unselectable="off"}window.selectiongomore=true;alert("partie 1 de l\047opération terminée")}else if(confirm("Vous allez continuer la phase 2 de l\047opération. Avertissement : Cette phase peut empêcher certains scripts sur la page de fonctionner, tel que les applications web. Cliquez sur OK seulement si vous n\047allez pas utiliser la page par la suite. Pour annuler les modifications apporté par l\047outil, vous pouvez réactualiser la page")){tag=document.getElementsByTagName("*");for(var i=0;i<tag.length;i++){tag[i].onmousedown=null;tag[i].onmouseup=null;tag[i].onclick=null;tag[i].onmousewheel=null}alert("partie 2 de l\047opération terminée")}}()
Conclusion :
Bon... ce n'est pas l'avancement du siècle. Et il y a encore quelques bugs avec IE mais heureusement ces bugs empêche de supprimer des trucs qu'il ne supporte pas. Mais cela peut être parfois utile pour les sites qui ne comprennent pas encore en compte le respect de l'utilisateur
EDIT : J'ai mis à jour car j'avais oublié le préfixe "javascript:" en plus d'ajouter un zip où le lien est déjà fait pour vous.
Codes Sources
A voir également
- Permettre la sélection du texte par l'utilisateur
- Créer un utilisateur mysql - Conseils pratiques -PHP
- Roulettechat texte - Forum PHP
- Texte aléatoire - Forum Visual Basic
- Text Aleatoire - Forum C / C++ / C++.NET
- Souligner texte illustrator - Forum Graphisme/design
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.