Aide à la sélection

Version imprimable

13/02/2007, 22h28
memberteam

Aide à la sélection
Salut tout le monde,
je cherche à sélectionner un contenu d'une page web en utilisant javascript, j'ai bien cherché comment faire, mais j'ai rien trouvé...y a uniquement la fonction select() concernant les champs de saisie.
ehh, je m'explique on suppose le code suivant:
Code:

1 2 3 4 5 6 7 8 <html> <head></head> <body> <p>à sélectionner</p> <input type="button" onclick="selectionner()" value="sélectionner" /> </body> </html>
la question est comment faire pour sélectionner le contenu de la balise P?
est-ce possible? :/

bonsoir,

justement pourquoi ne pas utiliser la fonction select ?
Tu peux faire passer un textarea pour un paragraphe grâce à une feuille de style qui supprime les bordures et l'ascenseur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idTxt{
 border: none;
 overflow: hidden;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function  selectionner()
{
  document.getElementById("idTxt").select();
}
 
//-->
</script>
 
</head>
 
<body>
 
    <textarea id="idTxt" readonly="readonly">à sélectionner</textarea><br />
    <input type="button" onclick="selectionner()" value="sélectionner" />
 
</body>
 
</html>

Yop!

Et ceci?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
  <head>
  <script language="javascript">
  function selectionner(theid)
  {
    var p = document.getElementById(theid);
    var textrg = document.body.createTextRange();
    textrg.findText(p.innerText);
    textrg.select();
  }	  
  </script>
  </head>
  <body>
    <p id="lep">à sélectionner</p>
    <input type="button" onclick="selectionner('lep')" value="sélectionner" />
  </body>
</html>

14/02/2007, 08h56
E.Bzz
Bonjour,

Citation:

Envoyé par memberteam

la question est comment faire pour sélectionner le contenu de la balise P?

Il y a plus simple, non ?
Code:

1 2 <p id="la_zone">à sélectionner</p> <input type="button" onclick="alert(document.getElementById('la_zone').innerHTML);" value="sélectionner" />
A+

EDIT : plus simple mais pas de selection, donc hors sujet => on oublie :oops:

Citation:

Envoyé par ryan

Yop!

Et ceci?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
  <head>
  <script language="javascript">
  function selectionner(theid)
  {
    var p = document.getElementById(theid);
    var textrg = document.body.createTextRange();
    textrg.findText(p.innerText);
    textrg.select();
  }
  </script>
  </head>
  <body>
    <p id="lep">à sélectionner</p>
    <input type="button" onclick="selectionner('lep')" value="sélectionner" />
  </body>
</html>

merci ryan, c'est exactement ce que je recherche :D

14/02/2007, 13h19
Auteur

le code de Ryan n'est pas compatible avec Firefox (à cause de createTextRange() et innerText).

E.Bzz >> au moment du clic, modife la couleur du fond et celui de la police, le texte sera ainsi "sélectionné" ;)
14/02/2007, 13h51
E.Bzz

Citation:

Envoyé par Auteur

E.Bzz >> au moment du clic, modife la couleur du fond et celui de la police, le texte sera ainsi "sélectionné" ;)

Oui c'est vrai, si c'est pour l'apparence ...
Mais je pensais qu'il y avait peut-être une histoire de copié/collé automatisé derrière tout ça :)

A+
14/02/2007, 14h39
ryan

Yop!

Citation:

Envoyé par Auteur

le code de Ryan n'est pas compatible avec Firefox (à cause de createTextRange() et innerText).

Voui, j'avais essayé autrement: une fonction récursive qui parcourait l'arbre en-dessous de l'objet choisi comme parent(ici un p), faisait le tri selon le type de noeud pour ne récupérer que les textes, mais je me suis ramassé un message d'erreur (out of memory) dont je ne suis pas parvenu à comprendre la cause exacte, donc j'ai laissé tomber le choli code cross-browser.

Là je suis en plein taf (si si), mais je vais ré-essayer ce soir si j'ai du temps.
14/02/2007, 17h51
memberteam

btw, la fonction createTextRange() à l'air de travailler juste avec doocument.body, tandis que ça doit marcher avec n'importe quelle référence d'objet. par exemple le code: document.getElementById("theid").createTextRange() ne marche pas :/
est-ce un problème relatif au browser, ou bien au référencement?
14/02/2007, 18h26
Auteur

Citation:

Envoyé par memberteam

btw, la fonction createTextRange() à l'air de travailler juste avec doocument.body, tandis que ça doit marcher avec n'importe quelle référence d'objet. par exemple le code: document.getElementById("theid").createTextRange() ne marche pas :/
est-ce un problème relatif au browser, ou bien au référencement?

createTextRange() est comme getElementById() : c'est une méthode de document... Mais comme je l'ai dit plus haut, tous les navigateurs de le reconnaissent pas.

En remplaçant ton p par un textarea (cf. code que j'ai donné plus haut) ne te convient pas ?
14/02/2007, 19h41
ryan

Yop!

Citation:

Envoyé par memberteam

btw, la fonction createTextRange() à l'air de travailler juste avec doocument.body

Et aussi avec les input, button, textarea.
14/02/2007, 21h09
memberteam

Citation:

Envoyé par Auteur

createTextRange() est comme getElementById() : c'est une méthode de document... Mais comme je l'ai dit plus haut, tous les navigateurs de le reconnaissent pas.

En remplaçant ton p par un textarea (cf. code que j'ai donné plus haut) ne te convient pas ?

non pas vraiment, je veux pas travailler avec les textareas.
en faites mon projet consiste à implémenter les fonctions de xpointer avec javascript, en lançant les commandes xpointer sur une page XHTML, voila pourquoi je ne veux pas utiliser des textarea
maintenant en ce qui concerne document.body.createTextRange(), la raison pourquoi je veux l'appliquer à des objets précis c'est que dans ma recherche dans l'arbre du document, ce que je récupère sont les noeuds, donc pour séléctionner un résultat il faut que je séléctionne le data contenu dans ce noeud
je m'expique:
on suppose que la commande xpointer est la suivante : xpointer(range(/p))
cette commande doit sélectionner par exemple le texte contenu dans P, réellement elle sélectionne tout le neoud : <p>texte</p>
mais dans la sélection si on rencontre un texte nommé "à sélectionner" en dehors du p concerné. ce texte va etre sélectionné aussi, et c'est ce qui ne doit pas etre fait.
15/02/2007, 09h25
E.Bzz

Alors, visiblement, plutôt que la recherche "dans la page", il vaut mieux que tu fasses un parcours de l'arborescence de tes objets (DOM), avec test sur le type (<p> ou pas), puis sur le data (= texte cherché ou pas).
Ensuite, comme suggéré par Auteur, tu change le style pour que, à l'affichage, cette fois, le texte soit "sélectionné".
Comme dans ton code tu seras "dessus", et qu'il sera sélectionné à l'écran, tu auras, fonctionnellemnt, exactement le même résultat et les même possibilités ...

A+
15/02/2007, 11h32
memberteam

1 pièce(s) jointe(s)

en effet, je me retrouve dans le noeud où je dois lancer la recherche.
mais document.body.createTextRange() sélectionne tout le contenu du body, or il se peut que le texte contenu dans le noeud figure dans un autre endroit donc quand je lance la fonction findText de TextRange relatif au document.body le texte dont j'en ai rien à faire sera inclu dans la sélection

vous trouverez ci-joint le script implémentant la fonction range...
15/02/2007, 12h04
E.Bzz

Citation:

Envoyé par memberteam

mais document.body.createTextRange() sélectionne tout le contenu du body, or il se peut que le texte contenu dans le noeud figure dans un autre endroit donc quand je lance la fonction findText de TextRange relatif au document.body le texte dont j'en ai rien à faire sera inclu dans la sélection

La solution que je te proposais visait justement à NE PLUS utiliser ces 2 fonctions ...

A+
15/02/2007, 12h16
memberteam

oui mais pour string-range, elle sélectionne une partie du data, mais pas tout, donc si je joue sur le style d'un noeud ceci va influencer le résultat visuel
par exemple si j'appelle string-range(/p, "à sélec")
ceci doit sélectionner uniquement les occurences de cette sous chaine:?