Javascript textarea自动调整大小无法正常工作

因此，我有一个问题，这个自动调整大小的功能，我抢走了互联网（由亚当贝雷斯迪克）。除了一个小问题，一切都很好；假设TexTaReA有100行（或者比页面更适合），并说你去编辑中间的东西，屏幕会一直跳起来让文本在浏览器/屏幕的底部。

例如：

（函数（）{
功能调整高度（el，最小高度）{
var outerHeight=parseInt（window.getComputedStyle（el）.height，10）；
var diff=外部高度-el.clientHeight；
el.style.height=0；
el.style.height=数学最大值（最小高度，el.SCROLLEHEIGHT+diff）+“px”；
}
var textAreas=[].slice.call（document.queryselectoral（'textarea[data adapteheight]）；
textAreas.forEach（函数（el）{
el.style.boxSizing=el.style.mozBoxSizing='边框框'；
el.style.overflow='hidden'；
var minHeight=标高高度；
el.addEventListener（'input'，function（）{
调整高度（el，最小高度）；
});
addEventListener（'resize'，function（））{
调整高度（el，最小高度）；
});
调整高度（el，最小高度）；
});
}());
问题在于这行代码：

el.style.height = 0;

它将textarea的高度设置为零，然后浏览器将textarea渲染为该大小，从而将浏览器窗口的高度降低回屏幕大小，使滚动位置为0或最顶部

守则：

el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';

然后将文本区域调整回适合所有文本所需的大小，并向下滚动浏览器窗口以仅显示当前光标位置，这就是为什么在浏览器屏幕中始终尽可能向下滚动的原因

您可以通过将窗口滚动位置恢复到textarea的高度设置为0之前的值来修复此问题。有关如何执行此操作，请参阅。
问题在于这行代码：

el.style.height = 0;

它将textarea的高度设置为零，然后浏览器将textarea渲染为该大小，从而将浏览器窗口的高度降低回屏幕大小，使滚动位置为0或最顶部

守则：

el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';

然后将文本区域调整回适合所有文本所需的大小，并向下滚动浏览器窗口以仅显示当前光标位置，这就是为什么在浏览器屏幕中始终尽可能向下滚动的原因

您可以通过将窗口滚动位置恢复到textarea的高度设置为0之前的值来修复此问题。查看如何操作。
我得出了与约翰·卡普雷斯相同的结论，尝试将
el.style.height
设置为
el.clientHeight
，如下所示：

el.style.height=el.clientHeight+'px'；

这将增大文本区域，但在删除文本时不会缩小它

进行了一些web搜索并找到了此

当您想在文本末尾以外的其他地方进行编辑时，它会增长、收缩，并且不会到处跳跃


//处理文本区域高度
函数calcHeight（值、最小高度、线宽、填充、边框）{
设numberOfLineBreaks=（value.match（/\n/g）| |[]）.length；
//最小高度+线条x线条高度+填充+边框
设newHeight=minHeight+numberOfLineBreaks*lineHeight+padding+border；
返回新高度；
}
设textarea=document.querySelector（“.resize ta”）；
textarea.addEventListener（“keyup”，（）=>{
let style=window.getComputedStyle（textarea）；
让lineHeight=parseFloat（style.getPropertyValue（'line-height'）；
让paddingTop=parseFloat（style.getPropertyValue（'padding-top'）；
让paddingBottom=parseFloat（style.getPropertyValue（'padding-bottom'）；
让minHeight=parseFloat（style.getPropertyValue（'min-height'）；
让borderTopWidth=parseFloat（style.getPropertyValue（'border-top-width'））；
让borderBottomWidth=parseFloat（style.getPropertyValue（'border-top-width'））；
textarea.style.height=calcHeight（textarea.value，minHeight，lineHeight，paddingTop+paddingBottom，borderTopWidth+borderBottomWidth）+“px”；
});
。调整ta的大小{
字体大小：16px；
行高：1.5；/*必须明确设置，十进制或浮点*/
溢出y：隐藏；
最小高度：60px；
填充：0；
}
我得出了与约翰·卡普雷斯相同的结论，尝试将
el.style.height
设置为
el.clientHeight
，如下所示：

el.style.height=el.clientHeight+'px'；

这将增大文本区域，但在删除文本时不会缩小它

进行了一些web搜索并找到了此

当您想在文本末尾以外的其他地方进行编辑时，它会增长、收缩，并且不会到处跳跃


//处理文本区域高度
函数calcHeight（值、最小高度、线宽、填充、边框）{
设numberOfLineBreaks=（value.match（/\n/g）| |[]）.length；
//最小高度+线条x线条高度+填充+边框
设newHeight=minHeight+numberOfLineBreaks*lineHeight+padding+border；
返回新高度；
}
设textarea=document.querySelector（“.resize ta”）；
textarea.addEventListener（“keyup”，（）=>{
let style=window.getComputedStyle（textarea）；
让lineHeight=parseFloat（style.getPropertyValue（'line-height'）；
让paddingTop=parseFloat（style.getPropertyValue（'padding-top'）；
让paddingBottom=parseFloat（style.getPropertyValue（'padding-bottom'）；
让minHeight=parseFloat（style.getPropertyValue（'min-height'）；
让borderTopWidth=parseFloat（style.getPropertyValue（'border-top-width'））；
让borderBottomWidth=parseFloat（style.getPropertyValue（'border-top-width'））；
textarea.style.height=calcHeight（textarea.value，minHeight，lineHeight，paddingTop+paddingBottom，borderTopWidth+borderBottomWidth）+“px”；
});
。调整ta的大小{
字体大小：16px；
线条高度：1.5；/*必须明确