Javascript 内容编辑<；部门>；：光标在占位符之前开始

我正在制作一个contenteditable div来获取用户输入。我想让占位符文本精确地从光标所在的位置开始，但是演示显示占位符文本从光标后面的2个字符（空白）开始。知道怎么修吗

<div id="comment_box2" contenteditable="true" autofocus="autofocus" autocomplete="off" spellcheck="false" placeholder="this text starts after the cursor"></div>

<style>
/*[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block;  For Firefox 
 }*/

#comment_box2{
  background-color: white;

  /*position:relative;*/
  border: 1px solid blue;
  /*height:60px;*/
  width: 500px;
  padding: 10px;
  color:black;
  border-radius:3px;
  text-indent: 10px;
  font-size:18px;

  /*border-color:yellow;*/
}
#comment_box2:focus{
  outline-style:solid;
  outline-color:blue;
  outline-width:0px;
}
</style>




<script type="text/javascript">
    window.onload = function() {
        document.getElementById("comment_box2").focus();
    };
</script>

/*[contenteditable=true]：空：在{
内容：attr（占位符）；
显示：block；用于Firefox
}*/
#评论第2栏{
背景色：白色；
/*位置：相对位置*/
边框：1px纯蓝色；
/*高度：60px*/
宽度：500px；
填充：10px；
颜色：黑色；
边界半径：3px；
文本缩进：10px；
字号：18px；
/*边框颜色：黄色*/
}
#评论第2栏：焦点{
轮廓样式：实心；
轮廓颜色：蓝色；
轮廓宽度：0px；
}
window.onload=函数（）{
document.getElementById（“comment_box2”）.focus（）；
};

删除：

文本缩进：10px


经过Firefox和Chrome测试，效果良好