Textarea高度自适应，addEventListener("input", funcName);无效

对前端不是很了解，基本完全按照上面的那个思路写的。但是在Chrome53上面运行还是会出现scrollbar，不会自适应高度。请问这是不是有可能是addEventListener无法接听input事件呢？

html代码

<div class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="输入文字"></textarea>
</div>

js代码

function makeExpandingArea(container) {
    var area = container.querySelector('textarea');
    var span = container.querySelector('span');
    area.addEventListener('input', function() {
        span.textContent = area.value;
    }, false);
    span.textContent = area.value;
｝
var areas = document.querySelectorAll('div');
var l = areas.length;
console.log("%d", l);
while (l--) {
    makeExpandingArea(areas[l]);
}

css代码　

.expandingArea{
    position:relative;
}

textarea{
    position:absolute;
    top:0;
    left:0；
    height:100%;
}


pre{
    display:block;
    visibility:hidden;
}

如果这个方法行不通的话能不能推荐一些可行的方法？主要用处是做一个博客的评论框，因为要提交form，所以又不能使用div的contenteditable="true"属性。

阅读 4.7k

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> .input { padding: 10px; width: 500px; min-height: 150px; border: 1px solid #ccc; resize: none; font-size: 20px; line-height:30px; overflow: hidden; word-wrap: break-word; } .hide { position: absolute; z-index: -100; visibility: hidden; } </style> </head> <body> <pre class="input hide" id="pre"></pre> <textarea class="input" id="textarea" placeholder="输入文字"></textarea> <script> var textarea = document.getElementById('textarea'); var pre = document.getElementById('pre'); textarea.oninput = function() { pre.textContent = textarea.value; textarea.style.height = pre.offsetHeight + 'px'; } </script> </body> </html>

Textarea高度自适应，addEventListener("input", funcName);无效

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？