1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Trucs & Astuces
  5. Permettre la sélection du texte par l'utilisateur

Permettre la sélection du texte par l'utilisateur

Soyez le premier à donner votre avis sur cette source.

Vue 3 796 fois - Téléchargée 201 fois

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
 7
28 févr. 2011 à 02:16
Bonjour, j'ai mis à jour avec une extension Safari, puisque l'ajout du lien dans les favoris est impossible.

Avantages :

- Style CSS chargés automatiquement
- Button d'accès direct, qui fonctionne de la même façon que le lien normal
- Compressé pour n'avoir que les fonctions utiles à Safari
- Plus résistant aux futures attaques contre ce script
- Installation en 1-click ;)

Pour l'installer, ouvrir le fichier "lien.safariextz"
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
 7
24 févr. 2011 à 23:57
@Heirem : En effet, mais je les ai supprimés dans la dernière mise à jour ;)

Sinon, j'ai remarqué que l'URL ne peut être placé dans les favoris dans Safari, seulement une portion est rajouté et cela cause une erreur de syntaxe. J'essaye donc de crÉer une extension pour ce navigateur ;) Je vous tiendrai au courant :P
cs_Heirem
Messages postés
22
Date d'inscription
dimanche 16 juillet 2006
Statut
Membre
Dernière intervention
25 novembre 2011
24 févr. 2011 à 23:30
Désolé de répondre tardivement.
Ce que je voulais dire c'est que ce code s'utilise comme une adresse URL.
Que ce soit en favoris ou pas.
Il faut juste faire attention qu'aucun retour à la ligne soit présent dans ce code.
C'est tout !
;o)
cs_arta
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
23 févr. 2011 à 08:25
RE

1) ouvrir le fichier HTML contenu dans le zip (ca c'est dur)
2) faire clic droit (ca c'est facile) sur le lien
3) et (ca c'est le plus dur) sélectionner "ajouter au favoris" (pour IE) ou "marque page sur ce lien" (firefox)

C'est le lien qu'il faut rajouter aux favoris, pas directement la page html.
Maintenant ça fonctionne, je te remercie !
cs_emilia123
Messages postés
122
Date d'inscription
mercredi 19 décembre 2001
Statut
Membre
Dernière intervention
5 janvier 2009
23 févr. 2011 à 08:22
désolée si tu le prend mal.

Alors pour essayé de t'aider encore un peu :
une fois le lien ajouté aux favoris, il suffit de cliquer sur ce favoris quand tu es sur une page qui bloque la selection.

Est ce qu'il y a encore quelque chose qui t'aiderait?

EM.
S'inscrire maintenant

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.

Du même auteur (jdmcreator)