May be someone has already faced with such strange issue. I would appreciate if you could give me any usefull advices.
SPOILER: working html fiddle is located the end of question.
TASK:
I'm developing just another WYSIWYG editor based on <div contenteditable>. One of main feature for user will be working with nested lists.
PREPARE
I'm in editor, working with list which was received from server and put to <div> in innerHTML:
HTML:
<div contenteditable="true">
<ul>
<li>
One
<ul>
<li>
Two
</li>
</ul>
</li>
</ul>
</div>
Browser:
- One
- Two
In real life, innerHTML, received from server, will be inline, of course:
<div contenteditable="true"><ul><li>One<ul><li>Two</li></ul></li></ul></div>
Assuming, that I need to delete letter e in word One. I put caret after the word and press Backspace as usual.
PROBLEM IN IE Mobile
In Chrome, Safari, desktop IE11 everything will be OK - letter e will be deleted, and caret remain in the right position. But in Windows Phone IE, caret will jump to the next position in list - before word Two.
Sorry for huge explanation, I put this HTML on google hosting, so you can try with your own Windows Phone and try delete letter e with backspace:
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
</head>
<body>
CORRECT backspace behaviour:
<div contenteditable="true">
<ul>
<li>
One
<ul>
<li>
Two
</li>
</ul>
</li>
</ul>
</div>
INCORRECT backspace behaviour:
<div contenteditable="true">
<ul><li>One<ul><li>Two</li></ul></li></ul>
</div>
</body>
</html>
http://www.googledrive.com/host/0Bw1Lu-P82yZ_TzNFa1VVTVpjbms
P.S.: yes, i noticed that despite the "equality" of these two div's, IE is adding one space after each word in the first variant. May be it can be a workaround if server will add   in each line.
UPDATE: this question is related to Windows Phone IE only.
Just as quick workaround - to add <br> in the end of each text element that belongs to <li> containing nested <ul>.
<ul><li>One<br><ul><li>Two<br></li></ul></li></ul>