Javascript 将插入符号移动到contenteditable元素的末尾，并将文本放在末尾

在我的例子中，我有两个问题

1.在第一次单击中，光标未移动到末端

2.在overflow中，我需要将文本放在末尾，因为有免费内容输入

$（“a”）。单击（函数（evt）{
evt.preventDefault（）；
var textBox=document.querySelector（“.c_textBox”）
textBox.innerText+=“你好，a，”；
var len=textBox.innerText.length+1
var range=document.createRange（）；
var sel=window.getSelection（）；
range.setStart（textBox.childNodes[0]，len）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
textBox.focus（）；
});
.c_文本框{
显示：块；
宽度：200px；
高度：40px；
空白：nowrap；
溢出：隐藏；
字体大小：1.6rem；
边界：无；
填充权：3rem；
左：2rem；
背景重复：无重复；
背景大小：2em；
/*背景位置：100%50%*/
背景颜色：浅灰色；
边框：2个黑色实心；
填充：4px；
}



尝试使用
\u00a0
作为空白。就这样,

$("a").click(function(evt){
  evt.preventDefault();
  var textBox = document.querySelector(".c_textBox")
  textBox.innerText +="\u00a0hello\u00a0\u00a0a,";
  var len = textBox.innerText.length
  textBox.scrollLeft += textBox.innerText.length;
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(textBox.childNodes[0], len );
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  textBox.focus();
});

和CSS：

.c_textBox{
  display:block;
  width:200px;
  height:40px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background-color:lightgrey;
  border: 2px black solid;
  padding:5px;
}

var len=textBox.innerText.length+2
将光标移动到输入的末尾。这可能会有所帮助，谢谢，但您知道将文本移动到和的方法吗，我可以看到插入符号吗？如果您添加新项目，您希望将光标向右移动并显示滚动条吗？我不会像您刚刚放置一些文本时那样，文本需要向左移动。请立即尝试，我希望这对您有所帮助：）我会将overflow-x更改为自动，而不是滚动。