moveToElementText () cause une erreur sur élément "text"
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:
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"> </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> |
