当添加自动高度时，光标跳转到文本区域

Question

我为textarea添加了一个自动高度，输入了很多文本，但光标出现了问题。当您按下添加到文本区的文本内的任何键时，光标上下跳动。

如何确保当按下键盘上的任何键时，光标不是不跳，而是保持在同一个地方

set autoheight(value) {
this.#autoheight = Boolean(value);
if (!this.#textarea.isConnected) return;
if (this.#autoheight) {
this.#textarea.style['overflow-y'] = 'hidden';
this.#textarea.style.height = this.#minHeightTA > this.#textarea.scrollHeight
? this.#minHeightTA + 'px'
: this.#textarea.scrollHeight + 'px';
this.#textarea.addEventListener('input', this.#handleTextareaInput);
} else {
this.#textarea.style['overflow-y'] = '';
this.#textarea.style.height = '';
this.#textarea.removeEventListener('input', this.#handleTextareaInput);
}
}

#handleTextareaInput = () => {
this.#textarea.style.height = 0;
this.#textarea.style.height = this.#minHeightTA > 
this.#textarea.scrollHeight
? this.#minHeightTA + 'px'
: this.#textarea.scrollHeight + 'px';
}

Answer 1

#handleTextareaInput = () => {
// Store the current cursor position
const startPos = this.#textarea.selectionStart;
const endPos = this.#textarea.selectionEnd;
// Update the textarea's height
this.#textarea.style.height = 0;
this.#textarea.style.height = this.#minHeightTA > this.#textarea.scrollHeight
? this.#minHeightTA + 'px'
: this.#textarea.scrollHeight + 'px';
// Restore the cursor position
this.#textarea.setSelectionRange(startPos, endPos);
}

在这个实现中，在更新文本区域的高度之前，#handleTextareaInput函数使用文本区域的selectionStart和selectionEnd属性存储当前光标的位置。在高度更新后，该函数使用textarea的setSelectionRange()方法恢复光标位置。

通过这个实现，光标在文本区输入时应该保持在相同的位置，即使它的高度动态变化。