问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
kjhlafa
    443137586

    参照的思路是segmentfault以前提过的问题

    对前端不是很了解，基本完全按照上面的那个思路写的。但是在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"属性。

    javascript
    阅读 4.7k
    3 个回答
    得票最新
    头像
    x007
      76311017

      input是什么事件，根本没听说过

      头像
      aeeee
        845695142

        应该是onkeydown事件吧

        头像
        小小小菜鸟
          6551210
          <!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>

          基本思路：利用另外一个html标签元素，设置成跟textarea一样的样式，当textarea输入文字内容时候，就将内容填充到该标签元素内，然后再将该元素的高度赋值给textarea；为什么要用pre标签，因为它不仅要接收textarea的文字内容，还要接收格式，比如回车，只有pre标签能够以原格式输出，如果是别的html标签就需要额外写css了

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏