| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Collapsed Element Selection</title> |
|---|
| 5 | <script type="text/javascript"> |
|---|
| 6 | |
|---|
| 7 | // The code inside window.onload has nothing to do with the issue, |
|---|
| 8 | // so it can be ignored. |
|---|
| 9 | window.onload = function () |
|---|
| 10 | { |
|---|
| 11 | document.designMode = 'on'; |
|---|
| 12 | |
|---|
| 13 | // For Safari and Opera, we must ensure the focus. |
|---|
| 14 | if ((/safari/i).test(navigator.userAgent)) |
|---|
| 15 | document.documentElement.focus(); // Safari |
|---|
| 16 | else |
|---|
| 17 | window.focus(); // Opera. |
|---|
| 18 | |
|---|
| 19 | moveSelection(); |
|---|
| 20 | } |
|---|
| 21 | |
|---|
| 22 | // Here is the function to be analyzed. |
|---|
| 23 | function moveSelection() |
|---|
| 24 | { |
|---|
| 25 | // Get our target empty element. |
|---|
| 26 | var el = document.getElementsByTagName('b')[0]; |
|---|
| 27 | |
|---|
| 28 | // Create a range inside the element. |
|---|
| 29 | var range = document.createRange(); |
|---|
| 30 | range.setStart(el, 0); |
|---|
| 31 | range.setEnd(el, 0); |
|---|
| 32 | |
|---|
| 33 | // Move the selection to the range. |
|---|
| 34 | var selection = window.getSelection(); |
|---|
| 35 | selection.removeAllRanges(); |
|---|
| 36 | selection.addRange(range); |
|---|
| 37 | } |
|---|
| 38 | |
|---|
| 39 | </script> |
|---|
| 40 | </head> |
|---|
| 41 | <body> |
|---|
| 42 | <h1> |
|---|
| 43 | Selection inside empty element |
|---|
| 44 | </h1> |
|---|
| 45 | <p> |
|---|
| 46 | This is an editable document. When loading this page, the caret should be blinking |
|---|
| 47 | inside the following brackets, at their same level. Start typing. The text must |
|---|
| 48 | be <strong>bold</strong>. |
|---|
| 49 | </p> |
|---|
| 50 | <p> |
|---|
| 51 | [<b></b>] |
|---|
| 52 | </p> |
|---|
| 53 | <hr /> |
|---|
| 54 | <p> |
|---|
| 55 | This page is not intended to be compatible with IE, as there are several hacks to |
|---|
| 56 | make it work there. It should instead work properly with Firefox, Opera and Safari. |
|---|
| 57 | </p> |
|---|
| 58 | </body> |
|---|
| 59 | </html> |
|---|
