| <!DOCTYPE html> |
| <style> |
| div { |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| #test { |
| color: magenta; |
| font: 20px/1 Monospace; |
| outline: none; |
| } |
| #overlapping-top { |
| background: white; |
| width: 100px; |
| height: 15px; |
| } |
| #overlapping-right { |
| background: white; |
| width: 50px; |
| height: 50px; |
| left: 50px; |
| } |
| </style> |
| <div contenteditable id="test"></div> |
| <!-- The overlapping DIVs are hiding the "^^^^^" characters and the caret to show only the composition underline. --> |
| <div id="overlapping-top"></div> |
| <div id="overlapping-right"></div> |
| <script> |
| document.getElementById("test").focus(); |
| if (window.textInputController) |
| textInputController.setMarkedText("^^^^^", 5, 0); |
| </script> |
