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 ;)

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

Ajouter un commentaire

Commentaires

macsou01
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011
-
C'est vrai que les sites qui utilisent des méthodes pour empêcher la sélection ou le clic droit sont assez frustrants.
Merci bien pour ce petit bout de code à garder dans un marque-page ! :)
lassie14
Messages postés
45
Date d'inscription
dimanche 29 mai 2005
Statut
Membre
Dernière intervention
3 mai 2010
-
superbe source merci beaucoup

j'ai deja fait mon marque page pour un accès rapide
cs_arta
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
-
Bonjour tous
Voyons voir cet utilitaire qui parait bien sympathique. :)
fs074995
Messages postés
8
Date d'inscription
jeudi 3 août 2006
Statut
Membre
Dernière intervention
18 février 2009
-
Bonjour
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
cs_emilia123
Messages postés
122
Date d'inscription
mercredi 19 décembre 2001
Statut
Membre
Dernière intervention
5 janvier 2009
-
bonjour,

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.