关于html：ContentEditable DIV中不可编辑跨度的选择和删除问题

Selection and deletion problems with Non-Editable Span inside ContentEditable DIV

我的DIV的ContentEditable设置为TRUE。在其中有几个跨度，其中ContentEditable设置为FALSE。

我捕获了BackSpace键，以便如果光标下的元素是，我可以将其删除。

问题是它只能与奇数范围交替使用。

因此，例如，使用下面的html代码，将光标置于DIV中文本的末尾，然后一直按Backspace直到div的开头。观察到它将选择/删除第一个跨度，然后保留第二个，然后选择/删除第三个跨度，然后保留第四个，依此类推。

此行为仅在Internet Explorer上。它完全可以在Firefox上正常运行。

如何使行为在Internet Explorer中保持一致？

以下html代码可用于重现行为：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#EditableDiv {
height: 75px;
width: 500px;
font-family: Consolas;
font-size: 10pt;
font-weight: normal;
letter-spacing: 1px;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid black;
padding: 5px;
}
#EditableDiv span {
color: brown;
font-family: Verdana;
font-size: 8.5pt;
min-width: 10px;
_width: 10px;
}
#EditableDiv p,
#EditableDiv br {
display: inline;
}

1
2

(Field1 < 500) OR (Field2 > 100 AND (Field3 <=200) )

编辑

仅供参考。我也在MSDN论坛中也问过这个问题。

相关讨论

面临的挑战是使IE11从右侧直接相对于退格。然后，下一个退格键将其选中并突出显示。这似乎是一个简单的目标，但是IE11不会合作。应该有一个快速简单的补丁，对不对？我想出的方法是将树向后移到第一个先前的非空节点，清除它们之间的空节点以安抚IE，然后评估一些条件。如果插入符应位于的右侧，则可以手动创建它(因为IE不会)，方法是创建一个新的范围obj，并在的末尾进行选择。在线演示我添加了一个如果两个跨度相互拖动，则IE会产生额外的冲突。例如，Field2Field3。然后，当您从右侧退格到Field3上，然后再次退格以删除它时，IE会将插入符号向左跳到Field2上。跳过Field2。 rr解决方法是拦截该错误，并在一对跨度之间插入一个空格。我不相信你会对此感到满意。但是，您知道，这是一种解决方法。无论如何，这又出现了另一个错误，即IE将插入的空间更改为两个空的textnode。更多grrr。因此，一种变通办法。请参阅非isCollapsed代码。

代码片段

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

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

#EditableDiv {
height: 75px;
width: 500px;
font-family: Consolas;
font-size: 10pt;
font-weight: normal;
letter-spacing: 1px;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid black;
padding: 5px;
}
#EditableDiv span {
color: brown;
font-family: Verdana;
font-size: 8.5pt;
min-width: 10px;
/*_width: 10px;*/
/* what is this? */
}
#EditableDiv p,
#EditableDiv br {
display: inline;
}