Est-il possible de rendre un texte caché non sélectionnable?

**Drag** · 30/07/2010, 17h46

Bonjour,

J'ai essayé plusieurs manières pour rendre un texte non sélectionnable.
En commencant pas des trucs simples"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:none;"

et en terminant par des essais un rien plus tordus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="ont-size:0px; letter-spacing: -5px; position: absolute;top: -5000px; text-indent:-5000px; position: absolute; left: -9999px; top: -9999px;"

Mais rien n'y fait: si je sélectionne un texte avec la souris, que je copie, puis que je colle, les parties texte "invisibles" seront embarquées dans le copier/coller!

Pour ceux qui ont besoin de plus de concret: imaginons une page multilingue qui tient sur une page HTML. Imaginons que lorsque l'utilisateur clique pour afficher en anglais, on cache les partie en francais, et que lorsqu'il choisit d'afficher le français, on cache ce qui est en anglais. Cela fonctionnera très bien visuellement. Par contre, si il sélectionne/copie/colle, il ne copiera pas uniquement ce qu'il voit à l'écran, car tous les textes seront sélectionnés.

Connaissez-vous une façon d'empêcher qu'un texte puisse être sélectionné dans une page HTML?
Le but n'est pas d'empêcher de copier de l'information ici, ce qui serait une cause perdue... mais de rendre la page plus agréable à l'utilisation justement...

Merci.

**Michel Rotta** · 30/07/2010, 21h23

Deux div dont un avec un display: none ?

**Bovino** · 30/07/2010, 22h37

Je vois pas comment tu arrives à sélectionner un texte placé dans un élément dont le display est à none

**Drag** · 03/08/2010, 10h48

Un peu de code pour venir en soutien alors (et merci de vous intéresser au cas):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
	<head>
		<title>Selection texte invisible</title>
	</head>
	<body>
		<div>Hello</div>
		<div style="display:none">Bonjour</div>
		<div>World</div>
		<div style="display:none">le Monde</div>
		<div>!</div>
	</body>
</html>

On voit ceci:
Hello
World
!

Mais si on sélectionne le texte dans la page et qu'on le copie/colle, on obtient ceci:
Hello
Bonjour
World
le Monde
!

D'où la question: quelqu'un sait-il comment rendre réellement invisible une partie de la page? J'ai comme l'impression que ce ne sera pas évident...

**eckerdecker** · 03/08/2010, 14h11

J'ai testé, et je confirme, ça m'a bien collé tout le contenu, y compris ceux dans des div en display:none ... c'est fou ça

**Vil'Coyote** · 03/08/2010, 14h37

et sinon l'intérêt et ou la dedans? car si tu affiche ton source tu accès tout de même au texte non?

**Drag** · 03/08/2010, 16h19

Effectivement. Mais le but n'est pas d'empêcher l'utilisateur d'avoir accès à ce qui est caché... car il n'y a aucune donnée que je tiens particulièrement à cacher! (Si on a des trucs à cacher, mieux vaut les garder chez soi.

) Au contraire, le but ici est d'aider l'utilisateur à accéder à l'information qu'il désire. Si un utilisateur lambda voit quelque chose dans une page web, qu'il le sélectionne, puis qu'il le colle, il s'attend à recopier le texte sélectionné. Alors qu'ici, il y aura du texte parasite.

Au final, l'utilisateur aura la possibilité d'afficher -ou non- des parties de la page selon ses besoins. L'intérêt serait donc de lui permettre de faire un copier/coller correct du texte qu'il voit. (Qui ici n'a jamais fait de copier/coller sur une page HTML?)

**polymorphisme** · 03/08/2010, 17h55

Bonjour,

je retournerais bien le problème :
pourquoi cacher un extrait de texte d'un paragraphe qui est destiné à être copier !

**eckerdecker** · 03/08/2010, 18h39

Et moi je dirai bien qu'en terme de référencement le texte caché par défaut ne sera pas référencé par google, alors pourquoi ne pas revoir ta gestion multilingue en sorte que le contenu dans chaque langue soit accessible via une url différente et non par un afficher/cacher javascript, ce qui au passage résoudra ton problème de copier/coller

**Drag** · 04/08/2010, 10h18

Merci pour les remarques.

polymorphisme > L'intérêt de cacher du texte est justement d'avoir un texte cohérent. En reprenant l'exemple précédent, certains voudront: "Hello World!", d'autres voudront "Bonjour le Monde!", mais personne ne voudra "Hello Bonjour World le Monde!".

eckerdecker > Le référencement par google est clairement le moindre des soucis dans ce cas-ci, cette page n'a pas besoin d'être référencée. De plus, une contrainte ici est que cette page doit tenir entièrement dans un seul fichier, pas possible donc de référencer différentes URL.

Si tout le monde essaie de me convaincre de ne pas afficher/cacher du texte, c'est parce que mon problème est réellement difficile/impossible à résoudre?

**eckerdecker** · 04/08/2010, 10h40

la propriété css display avec comme valeur "none" est clairement LE moyen de cacher du contenu. Il se trouve qu'elle n'empêche pas la sélection et ça me surprend.
Si le fait de faire un copier/coller cohérent est important pour toi tout en conservant le fonctionnement actuel il va falloir te creuser la tête.
De but en blanc il y a bien une solution qui me vient à l'esprit : exporter tes contenus texte, dans des variables javascript par exemple, et plutôt que de cacher/montrer tu effaces/remplies tes conteneurs avec ces contenus, en fonction de la langue. Mais ça me semble alambiqué et pas très propre pour simplement permettre des copier/coller.
Tu peux aussi inciter les utilisateurs à plutôt utiliser la fonction impression, avec un bouton "Imprimer" bien visible par exemple. Tu n'as plus qu'à appliquer une feuille css dédiée au print.

**Bovino** · 04/08/2010, 11h35

Une solution pourrait aussi être de séparer clairement les blocs correspondant aux différentes langues plutôt que de les imbriquer.

**Drag** · 04/08/2010, 12h24

Pour l'utilisation de paramètres javascript qui contiendrait les données, j'y avais aussi pensé, mais je préfèrerais éviter justement. J'ai l'impression qu'au final, je risque bien de m'y coller. (Même si ça va rendre le code bien moins clair et bien moins propre... l'emploi des CSS pour afficher ce dont on a besoin me plaisait beaucoup et fonctionnait très bien... mis à part le copier/coller.)

Quand à séparer clairement les textes qui ne doivent pas apparaitre ensemble, ça peut également être une solution... mais alors il faut veiller à ne pas viser trop large avec la souris, ne pas utiliser Ctrl-A, et dupliquer les parties de texte qui sont communes... ça ne me convainc donc qu'à moitié.
De plus, la page est générée par XSLT, ce qui amènerait à changer toute la logique, je préfère éviter.

Et bien merci de vous être creusé la tête avec moi! Ca me conforte un peu plus dans l'idée qu'il n'y a pas de solution à ce cas.

Est-il possible de rendre un texte caché non sélectionnable?

CSS

Discussions similaires

Partager

Partager