textarea 动态填充内容 文本框高度自适应

Posted 2023-04-03

参考技术A 需求是导入文件内容，textarea文本框自动增加高度

如果要使用监听最好使用oninput而不是onchange：
onkeyup 使用复制粘贴时，高度不能自动改变
onchange 事件：在内容改变（两次内容有可能相等）且失去焦点时触发，不能实时同步
oninput 事件：html5 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发

我这边是监听回车键，每次回车则重新设置高度

textarea多行文本框自适应高度

<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<script>
    $(function(){
        function autoHeight(ele){
            var $this = $(ele);
            $this.css({‘height‘:‘20px‘,‘overflow-y‘:‘hidden‘}).height(ele.scrollHeight);
            if(parseInt($this.height())>60){
                $this.height(60);
            }
        }
        $(‘.text‘).on(‘input propertychange‘,function(){
            autoHeight(this);
        })

    $(‘.text‘).trigger("input");
    $(‘.text‘).trigger("propertychange");
})

 }) </script>

<textarea name="message"  class="text"></textarea>