[DHTML] Afficher la selection (le surlignage de la selection

hibou57 · Message par **hibou57** » 02 nov. 2007, 06:52

Hi all,

Je rencontre un problème avec la selection sous FireFox : quand j'ajoute un range à la selection, la selection n'apparait dans la vue de la page. J'entend pas "ne s'affiche pas", que ni le curseur (pour range collapsed) ni le surlignage (pour un range selectionant un noeud texte par exemple) ne s'affiche.

Sous IE c'est facile, un simple selection.select() suffit. Sous Opera (via l'API W3C, car Opera supporte l'API IE et W3C en même temps), il suffit de donner le focus au document.body contenant la selection. Mais sous FireFox et les Gecko like, rien n'y fait : la seule selection qui s'affiche, est celle produite par l'utilisateur/rice.

So, how do I do ?

Many thanks

Message envoyé avec : Opera/9.23 better than FireFox, lol (Windows NT 5.1; U; fr)

Message par **Benoit** » 02 nov. 2007, 12:29

Je pense qu'il faut attendre Gecko 1.9 et sa gestion des sélections multiples. Est-ce que tu as essayé avec une alpha de Firefox 3 ?

hibou57 · Message par **hibou57** » 03 nov. 2007, 03:17

Bonsoir, merci pour la réponse,

En fait je posais la question pour les selections simples, car je n'utilise pas les selections multiples.

Si je fais par exemple

var sel;
var node;
var range;
sel = window.getSelection();
node = ....; // un noeud dans le document.
range = document.createRange();
range.selectNode (node);
// c'est ici que ça se passe
sel.removeAllRanges();
sel.addRange(range);
// La selection devrait logiquement être visible dans la vue de la page
// (surlignage), mais il n'en est rien.

Voilou

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

Message par **Benoit** » 03 nov. 2007, 10:37

Je pense qu'à partir du moment où tu utilises des objets range ce sont des sélections multiples (même s'il n'y en a qu'une).

Par contre, un truc auquel je n'avais pas pensé : si tu es dans un élément input ou textarea, tu peut peut-être t'en sortir avec les attributs selectionStart et selectionEnd de l'élément.

martin · Message par **martin** » 03 nov. 2007, 12:54

hibou57 a écrit : Si je fais par exemple

Code : Tout sélectionner

var sel;
var node;
var range;
sel = window.getSelection();
node = ....; // un noeud dans le document.
range = document.createRange();
range.selectNode (node);
// c'est ici que ça se passe
sel.removeAllRanges();
sel.addRange(range);
// La selection devrait logiquement être visible dans la vue de la page
// (surlignage), mais il n'en est rien.

Euh, ton code marche parfaitement chez moi

.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script>
function init() {
var sel;
var node;
var range;
sel = window.getSelection();
node = document.getElementById("myid");
range = document.createRange();
range.selectNode (node);
// c'est ici que ça se passe
sel.removeAllRanges();
sel.addRange(range);
}

window.onload = init;
  </script>
</head>
<body>
  <h1>ghj hjkj<span id="myid">aeaeeae</span> kjlkj</h1>
  <div>
    hj kjh jhk jhk hkj kjh kjhk jhkj hkjh kjh 
  </div>  
</body>
</html>

hibou57 · Message par **hibou57** » 03 nov. 2007, 15:31

Benoit a écrit :Je pense qu'à partir du moment où tu utilises des objets range ce sont des sélections multiples (même s'il n'y en a qu'une).

Beh, je n'ai pas de certitude à ce sujet, vu que j'ai toujours pensé qu'une selection multiple est une selection avec plusieurs range. Je pensais qu'avec un seul range, ce n'est pas une selection multiple. D'ailleur sur le MDC il est dit que l'on ne rencontre typiquement que des selections simples avec un seul range. Enfin, peut-être que je me trompe, il faut attendre le passage de quelqu'un(e) qui connais la sujet à fond.

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

martin a écrit : Euh, ton code marche parfaitement chez moi .

Bon, je suis maudit alors. Mais il y a peut-être un détail qui est important, et que je n'ai pas précisié : la selection se trouve dans un IFRAME, et non pas dans la fenêtre principale.

Je fais mes testes avec FireFox Mozilla 2.0, je testais aussi avant sur 1.5, mais apparement ce qui fonctionne sur 2.0 fonctionne aussi pour 1.5, et donc je ne fais plus ces testes (du moins plus aussi régulièrement)

Je pensais à un problème de focus, mais le focus n'a d'effet que sous Opera

Sinon, je viens à l'instant d'essyer ton interprétation de l'exemple, et oui, ça marche. Donc c'est peut-être le fait que ce soit dans un IFRAME en designMode

hibou57 · Message par **hibou57** » 03 nov. 2007, 18:37

Ah, j'ai trouvé : c'est parce que dans mon application je donne le focus à un élément.

Si je fais :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    </head> 
    <body>
        <form id="form">
        <input id="button" type="button" value="Do thing">
        </form> 
        <h1>ghj hjkj<span id="myid">aeaeeae</span> kjlkj</h1> 
        <div> hj kjh jhk jhk hkj kjh kjhk jhkj hkjh kjh </div>  
        <script> 
            var button;

            function dothing()
            { 
                var sel; 
                var node; 
                var range; 
                sel = window.getSelection(); 
                node = document.getElementById("myid"); 
                range = document.createRange(); 
                range.selectNode (node); 
                // c'est ici que ça se passe 
                sel.removeAllRanges(); 
                sel.addRange(range);
                // Si on retire la ligne suivante, alors la selection fonctionne.
                button.focus(); 
            } 

            button = document.getElementById("button");
            button.onclick = dothing;
        </script> 
    </body> 
</html>

La selection ne s'affiche plus, et même si on ajoute un "document.body.focus();" à la suite du button.focus(); la selection ne s'affiche toujours pas. Si on retour button.focus(); alors le surlignage s'affiche norlament. Il se trouve que si le focus est donné à un autre élément, le surlignage disparait, et même si on redonne plus tard le focus à un élément parent de la selection, alors le surlignage ne se réaffiche pas.

C'est embêtant. Existe t-il un moyen de rendre le surlignage rémanent ?

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

martin · Message par **martin** » 03 nov. 2007, 18:39

hibou57 a écrit : Sinon, je viens à l'instant d'essyer ton interprétation de l'exemple, et oui, ça marche. Donc c'est peut-être le fait que ce soit dans un IFRAME en designMode

Çà doit fonctionner dans un iframe éditable.

Tu devrais nous montrer un exemple minimal en ligne, on pourrait plus facilement chercher où çà coince.

hibou57 · Message par **hibou57** » 03 nov. 2007, 18:44

Hello,

Nos postes se sont croisées

Regarde juste au desssus.... je vais faire des essais sur l'application elle-même. Dans l'application je ne donne pas le focus à un bouton, mais à un contrôl fait maison.

La question qui se pose finalement est celle de la rémanence du surlignage.

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

martin · Message par **martin** » 03 nov. 2007, 18:47

hibou57 a écrit : C'est embêtant. Existe t-il un moyen de rendre le surlignage rémanent ?

Pas à ma connaissance.
Si tu en as vraiment besoin, je vois pas autre chose que de stocker quelque part les caractéristiques du range ou de la sélection, pour pouvoir la rétablir par la suite...

martin · Message par **martin** » 03 nov. 2007, 18:55

je rajoute, 2 éléments d'une page ne peuvent évidement pas avoir le focus en même temps.

Par contre, si tu fait une sélection dans l'iframe, et que tu donnes le focus à un élément qui est dans la page contenant l'iframe (donc pas dans l'iframe), la surbrillance de la selection doit, je pense, rester active.

hibou57 · Message par **hibou57** » 03 nov. 2007, 19:50

Un IFRAME est effectivement censé avoir sa propre selection et son propre focus, indépendament de la page principale dans laquelle l'IFRAME est contenu.

Et justement, ça ne se passe pas comme ça. Le focus que je donne est toujours donné à un élément de la page principale, et la selection est toujours dans l'IFRAME. Donc à priori la selection devrait rester visible, et c'est ce qui ne se produit pas dans mon cas.

Je n'affirme rien, et c'est peut-être mon application qui génère des effets de bord que je n'ai pas remarqué.

En tous cas merci pour vos réponses, et je vais poursuivre mes petites recherches sur la question.

Info: A noter que même sous Opera ça n'est pas tout à fait parfait non-plus. Sous Safari les choses semblent se passer exactement comme sous FireFox, et il n'y a que sous IE que le surlignage peut être commander sans défaut. Mais le fonctionnement sous IE est différent : c'est une selection texte, et non pas une selection DOM, et de plus, IE ne distingue pas la selection dans l'IFRAME et la selection dans la fenêtre principale, puisque que pour IE les deux font partie du même système de selection.

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

hibou57 · Message par **hibou57** » 04 nov. 2007, 07:09

Finalement j'ai put partiellement résoudre le problème en éliminant la mise au focus de certains éléments.

Partiellement résolu.... car étrangement l'utilisation de scrollIntoView peut faire disparraître le surlignage de la selection ou le curseur clignotant (pour les selection collapsed).

Ce rapport entre l'apparence de la selection et l'utilisation de scrollIntoView est-il normal ou pas ?

Message envoyé avec : Opera/9.23 (Windows NT 5.1; U; fr)

Geckozone

[DHTML] Afficher la selection (le surlignage de la selection

[DHTML] Afficher la selection (le surlignage de la selection

Qui est en ligne ?