Question

我在页面中添加了一些代码时遇到了一些麻烦。我想让每个textarea元素在更改时自动增长，并在页面首次加载时自动调整大小。我得到的代码如下：

function auto_grow(element) {
    element.style.height = '5px';
    element.style.height = (element.scrollHeight) + 'px';
    console.log(element + ' changed to ' + element.style.height);
}

window.addEventListener('load', function () {
    var e = document.getElementsByTagName('textarea');
    for (var i = 0; i < e.length; i++) {
        auto_grow(e[i]);
        e[i].addEventListener('change', function () {
            auto_grow(e[i])
        });
    }
})

它可以在没有任何问题的情况下调整负载，但不会在更改时调整。我假设我错过了一些简单的东西，但我无法弄清楚它是什么。任何人都可以对我失踪的东西有所了解吗？

编辑：根据收到的输入，我想出了以下对我有用的解决方案：

window.addEventListener("load", function () {
        var e = document.getElementsByTagName('textarea');
        var a = Array.prototype.slice.call(e,0);
        a.forEach(function(x) {
            auto_grow(x);
            x.addEventListener("keyup", function(){auto_grow(this)});
            })
        }
    )

我使用了keyup，因为它似乎更加一致。 forEach让我想起了我曾经使用python的迭代循环，所以我选择了其他选项。

Javascript事件侦听器未按预期工作

0 个答案: