blob: 01fc4d6de11309b194faef6e3b6dbb690a87bf83 [file] [log] [blame]
<!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>