文本光标问题将字符插入可满足的元素时

Question

有一个可满足的预元素。我想通过选项卡按钮添加选项卡字符。因此，我添加了称为puttab的JS方法。此方法可以正常工作。但是文本光标有一个问题。 在正常键入时，视图不断向右转移。但是，当按下标签键时，视图不会在线路结束后继续向右滑动。然后，例如，当我按“ a”键时，我突然通过向右滑动而获得预期的视图。

我找不到有关在JS方法中添加字符后遵循文本光标的明确信息：

function putTab() {
  var pre = document.getElementById("typearea");
  var doc = pre.ownerDocument.defaultView;
  var sel = doc.getSelection();
  var range = sel.getRangeAt(0);      

  var tabNode = document.createTextNode("    ");
  range.insertNode(tabNode);

  range.setStartAfter(tabNode);
  range.setEndAfter(tabNode);
  sel.removeAllRanges();
  sel.addRange(range);
}

document
  .querySelector('button')
  .addEventListener('click', putTab);

#typearea {
    overflow-x: hidden;
    margin: 8px;
    max-height: auto;
    white-space: pre;
    display: block;
    width: auto;
    line-height: 1.5;
}

<button>Insert Tab</button>

<pre id="typearea" contenteditable>
  Some predefined text.
</pre>

我希望我清楚地解释了这个问题，谢谢。

Answer 1

由于OP提供的样式至少可以水平地滚动，因此在附加其他字符的过程中，需要再次将内容滚动到其父母的视图中。

因此，OP可以使用内容编辑的容器的scrollto方法。但是，再次，OP必须弄清楚何时（附加内容）和何时（例如，在光标仍然完全对齐时预先插入或插入内容）以应用此方法。

但是，使用容器的scrollby方法涵盖了任何情况。

function putTab() {
  var pre = document.getElementById("typearea");
  var doc = pre.ownerDocument.defaultView;
  var sel = doc.getSelection();
  var range = sel.getRangeAt(0);

  const scrollWidthBefore = pre.scrollWidth;

  var tabNode = document.createTextNode("    ");
  range.insertNode(tabNode);

  range.setStartAfter(tabNode);
  range.setEndAfter(tabNode);
  sel.removeAllRanges();
  sel.addRange(range);

  pre.scrollBy(pre.scrollWidth - scrollWidthBefore, pre.scrollHeight);

  // // perfect approach for appending content
  // // but leads to out of view scrolling in
  // // all other cases of perfectly visible
  // // content like prepending content or
  // // inserting it.
  //
  // pre.scrollTo(
  //  pre.scrollWidth - parseFloat(window.getComputedStyle(pre).getPropertyValue('width')),
  //  pre.scrollHeight,    
  // );
}

document
  .querySelector('button')
  .addEventListener('click', putTab);

#typearea {
  overflow-x: hidden;
  margin: 8px;
  max-height: auto;
  white-space: pre;
  display: block;
  width: auto;
  line-height: 1.5;
}

<button>Insert Tab</button>

<pre id="typearea" contenteditable>Some predefined content.</pre>