將字符插入contenteditable元素時出現文本游標問題-有解無憂

有一個 pre 元素是 contenteditable。我想通過 TAB 按鈕添加制表符。所以，我添加了一個名為 .js 的 js 方法putTab。這種方法效果很好。但是文本游標存在問題。正常打字時，視圖不斷向右移動。但是當按下tab鍵時，視圖在行尾后并沒有繼續向右滑動。然后，例如，當我按下'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>

我希望我能清楚地解釋問題，謝謝。

uj5u.com熱心網友回復：

由于 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/487856.html

標籤：javascript dom 滚动视图内容可编辑 js-scrollby

上一篇：如何在正確的元素上執行功能？

下一篇：為什么DOM有面向物件的結構，而JS沒有？