JS历理 文本高度自适应 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="/_/_js/layui/css/layui.css">
    <link rel="stylesheet" href="/_/_css/base.css">
    <script src="/_/_js/layui/layui.js"></script>
    <script src="/_/_js/jquery-1.10.1.min.js"></script>
</head>
<body>
<textarea  autoHeight="true" style='overflow-y:hidden' class="layui-textarea">
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
</textarea>
<script>
    $(function(){
        $.fn.autoHeight = function(){
            function autoHeight(elem){
                elem.style.height = 'auto';
                elem.scrollTop = 0; //防抖动
                elem.style.height = elem.scrollHeight + 'px';
            }
            this.each(function(){
                autoHeight(this);
                $(this).on('keyup', function(){
                    autoHeight(this);
                });
            });
        }
        $('textarea[autoHeight]').autoHeight();
    })
</script>
</body>
</html>

效果图：

posted @ 2024-08-05 23:20  onestopweb  阅读(28)  评论(0)    收藏  举报