Permettre la sélection du texte par l'utilisateur
Soyez le premier à donner votre avis sur cette source.
Vue 3 409 fois - Téléchargée 162 fois
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
- Document.onselectstart
- Onselectstart - Meilleures réponses
- User-select - Meilleures réponses
- Selection de texte par paragraphe - Codes sources - Visual Basic / VB.NET (Texte)
- 1 ligne pour empêcher le click droit et la sélection de texte - Codes sources - Javascript (Navigation)
- Pas de clic droit ni de sélection de texte - Codes sources - Javascript (Navigation)
- C# / .NET : Coqtexttools : transformations texte simple et utilisation antixsslibrary - CodeS Sourc - Guide
- Selection de texte avec la souris ✓ - Forum - VBA Office (Excel, Word ...)
Commentaires
- Messages postés
- 45
- Date d'inscription
- mardi 20 mars 2007
- Statut
- Membre
- Dernière intervention
- 28 juillet 2011
-Merci bien pour ce petit bout de code à garder dans un marque-page ! :)
- Messages postés
- 45
- Date d'inscription
- dimanche 29 mai 2005
- Statut
- Membre
- Dernière intervention
- 3 mai 2010
-j'ai deja fait mon marque page pour un accès rapide
- Messages postés
- 98
- Date d'inscription
- dimanche 22 janvier 2006
- Statut
- Membre
- Dernière intervention
- 24 juillet 2013
-Voyons voir cet utilitaire qui parait bien sympathique. :)
- Messages postés
- 8
- Date d'inscription
- jeudi 3 août 2006
- Statut
- Membre
- Dernière intervention
- 18 février 2009
-Ce petit bout de code me semble intéressant dans un nombre
de cas non négligeable.
Comme novice (très) j'ai cependant un petit problème de compréhension.
Quand je copie le code dans la barre d'adresse, j'ai une réponse du genre :Request-URI Too Large
Ou est ce que je bug?
Merci
- Messages postés
- 122
- Date d'inscription
- mercredi 19 décembre 2001
- Statut
- Membre
- Dernière intervention
- 5 janvier 2009
-J'aurais une petite remarque... pour pouvoir facilement l'insérer en tant que raccourci, il serait plus facile si il n'y avait pas des " et des ' mélangés.
ex : qu'il n'y ait que des ' pour encadrer les textes, et un \' si on doit afficher un ' au milieu du texte.
Parce que pour en faire un lien dans les favoris il faut reprendre un peu le script et tout passer soit en " soit en '..
mais sinon, c'est pas mal en effet..
bonne continuation.
EM.
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.