moveToElementText () cause une erreur sur élément "text"

**schnee** · 18/04/2014, 17h47

Bonjour,

Je suis en train de tester une fonction permettant de créer une sélection avant, sur ou après un élément dans une div contenteditable.
Avec IE11, FF, Safari et Chrome, tout baigne.
Le problème est quand je mets IE11 en mode compatible IE8.
Curieusement, la fonction selectNodeContents(), qui est supposée être appliquée sur un node contenant du texte, plante sur un node de type 3 (text) et fonctionne sur le type 1 (element).

Est-ce que qqun aurait une explication, et si possible une autre solution ?

Code :

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

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE  HTML>
<html>
<body>
<div  id="editable"  contenteditable="true">text1  text1  text1<br>text2  text2  text2<br>text3  text3  text3</div>
<TABLE  WIDTH="400"  BORDER="1"  CELLSPACING="0"  CELLPADDING="2">
    <TR  VALIGN="top">
      <TD>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="0"  onclick="setElement(0)"  CHECKED>Node  0<BR>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="1"  onclick="setElement(1)">Node  1<BR>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="2"  onclick="setElement(2)">Node  2<BR>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="3"  onclick="setElement(3)">Node  3<BR>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="4"  onclick="setElement(4)">Node  4<BR>
      <INPUT  TYPE="radio"  NAME="element"  VALUE="-1"  onclick="setElement(-1)">Whole  editable</TD>
      <TD>
      <INPUT  TYPE="radio"  NAME="position"  VALUE="-1"  onclick="setSelection(-1)">Before<BR>
      <INPUT  TYPE="radio"  NAME="position"  VALUE="0"  onclick="setSelection(0)"  CHECKED>Whole  Zone<BR>
      <INPUT  TYPE="radio"  NAME="position"  VALUE="1"  onclick="setSelection(1)">After<BR>
      </TD>
    </TR>
    <TR><TD  ID="report"  COLSPAN="2">&nbsp;</TD></TR>
</TABLE>
</body>
<SCRIPT  ID="debugScript"  LANGUAGE="JavaScript"  SRC="/commun/debug/debug.js"></SCRIPT>
<script>
var  element  =  document.getElementById("editable")
var  el  =  element.childNodes[0];
var  node  =  0;
var  position  =  0;
function  setElement  (n)
    {
    node  =  n;
    el  =  (node  >=0  ?  element.childNodes[node]  :  element);
    setSelection(position)
    }
function  setSelection(pos)
    {
    var  content;
    if  (el.outerHTML)  content  =  el.outerHTML;
    else  if  (el.nodeValue)  content  =  el.nodeValue;
    document.getElementById  ('report').innerText  =  ("node  "  +  node  +  ",  type  =  "  +  el.nodeType  +  ",  content  =  "  +  content)
    position  =  pos;
    if(window.getSelection)  //  IE  >=  11
        {
        var  sel  =  window.getSelection();
        var  range  =  document.createRange();
        range.selectNodeContents(el);
        if(position  ==  -1)  
            {
            range.collapse(true);
            }
        else  if  (position  ==  1)  
            {
            range.collapse(false);
            }
        sel.removeAllRanges();
        sel.addRange(range);
        }
    else    //  IE  <  11
        {
        element.focus()
        var  range  =  document.body.createTextRange();
        try
            {
            range.moveToElementText(el);
            }
        catch  (e)	{alert("error  :  "  +  e.message)}
        if(position  ==  -1)  
            {
            range.collapse(true);
            }
        else  if  (position  ==  1)  
            {
            range.collapse(false);
            }
        range.select()
        }
    element.focus()
    }
setSelection(0);
</SCRIPT>
</HTML>

**NoSmoking** · 20/04/2014, 09h24

Bonjour,
le nodeType 1 et 3 ne sont pas de même nature même si les navigateurs "modernes" sont capables de les traiter, en partie, de la même manière.

1 : nœud élément
3 : nœud texte

pour les navigateurs "anciens" il te faut encapsuler le nodeType 3 dans un nodeType 1 pour pouvoir obtenir le même résultat.

Concrètement dans ton cas il te faut le faire dans le cas où la méthode window.getSelection n'est pas supportée par le navigateur.

Voici une fonction d'encapsulage

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function setNodeType1( noeud){
  var oSpan, oText, oNode = noeud;
  if( oNode.nodeType == 3){
    //-- Creation d'un SPAN élément neutre
     oSpan = document.createElement( 'SPAN');
    //-- Récup. du noeud texte
     oText= oNode.splitText(0);
     oSpan.appendChild( oText);
     oNode.parentNode.replaceChild( oSpan, oNode);
     oNode = oSpan;
  }
  return oNode;
}

et dans ta fonction faire l'appel de la sorte

Code :

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

oRange.moveToElementText(el = setNodeType1(el));

nota: dans ton cas l'utilisation de variable global ne me parait pas judicieuse !

**schnee** · 21/04/2014, 23h15

Voici une fonction d'encapsulage

Merci pour le tuyau, ça marche en effet.
Par contre, ça pollue le texte avec des SPANs inutiles.
Débile quand même que la fonction « move To Element Text » ne soit pas capable de gérer un « élément texte »

moveToElementText () cause une erreur sur élément "text"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager