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

Question

所以我对我从互联网上获取的这个自动调整大小功能有疑问（作者：Adam Beres-Deak）。除了一个小问题外，一切都运行良好；假设 textarea 有 100 行（或超过页面可以容纳的行数）并说您在中间编辑某些内容，屏幕将一直跳到浏览器/屏幕底部以使文本 RIGHT。

例子：

(function(){
    function adjustHeight(el, minHeight){
        var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
        var diff = outerHeight - el.clientHeight;
        el.style.height = 0;
        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }
        
    var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
    textAreas.forEach(function(el){
        el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
        el.style.overflow = 'hidden';
        var minHeight = el.scrollHeight;
        el.addEventListener('input', function(){
            adjustHeight(el, minHeight);
        });
        window.addEventListener('resize', function(){
            adjustHeight(el, minHeight);
        });
        adjustHeight(el, minHeight);
    });
}());

<textarea data-adaptheight rows="2" cols="40" placeholder="Your input" style="padding: 7px; line-height: 1.5;width: 100%;display: block;"></textarea>

有人知道是什么原因造成的吗？我不是最擅长 javascript，但我确实尝试过查看它并查看可能导致它的原因，但我没有成功。

非常感谢各位大侠的帮助，谢谢！

---

回答：

查看问题的答案后：https ://stackoverflow.com/a/18262927/13231904

我能够将这个问题的代码与那个答案的代码合并，以获得一个非常有效的功能：

if(window.attachEvent){
    observe = function(element, event, handler){ element.attachEvent('on'+event, handler); };
}else{
    observe = function(element, event, handler){ element.addEventListener(event, handler, false); };
}
function init(){
    var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
    textAreas.forEach(function(el){
        function resize(){
            var scrollLeft = window.pageXOffset ||
                (document.documentElement || document.body.parentNode || document.body).scrollLeft;
            var scrollTop = window.pageYOffset ||
                (document.documentElement || document.body.parentNode || document.body).scrollTop;
            el.style.resize = "none";
            el.style.overflow = 'hidden';
            el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
            el.style.height = "auto";
            el.style.height = el.scrollHeight + 'px';
            window.scrollTo(scrollLeft, scrollTop);
        }
        observe(el, 'input', resize);
        resize();
    });
}
init();

<textarea data-adaptheight style="padding: 7px;width: 100%;display: block;" rows="1" cols="40" placeholder="Your input">
</textarea>

标签： javascripthtml

Answer 1

问题是这行代码：

el.style.height = 0;

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

编码：

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

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

您可以通过将窗口滚动位置恢复到 textarea 的高度设置为 0 之前的值来解决此问题。有关如何执行此操作，请参阅此答案。