<!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>