autoTextarea-文本框根据输入内容自适应高度

最新推荐文章于 2024-01-19 10:39:04 发布

chenmiaosct

最新推荐文章于 2024-01-19 10:39:04 发布

阅读量570

点赞数

分类专栏： web 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/chenmiaosct/article/details/84087124

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

<title>autoTextarea</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>

(function($){

    $.fn.autoTextarea = function(options) {

        var defaults={

            maxHeight:360, //默认最大高度

            minHeight:$(this).height() //默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示

        };

        var opts = $.extend({},defaults,options);

        return $(this).each(function() {

            $(this).bind("paste cut keydown keyup focus blur",function(){

                var height,style=this.style;

                this.style.height =  opts.minHeight + 'px';

                if (this.scrollHeight > opts.minHeight) {

                    if (this.scrollHeight > opts.maxHeight) {

                        height = opts.maxHeight;

                        style.overflowY = 'scroll';

                    } else {

                        height = this.scrollHeight;

                        style.overflowY = 'hidden';

                    }

                    style.height = height  + 'px';

                }

            });

        });

    };

})(jQuery);

</script>

</head>

<body>

<textarea id="ta" style="width:200px;height:28px;"></textarea>

<script>

$('#ta').autoTextarea();
//$('#ta').autoTextarea({maxHeight:240,minHeight:30});    这是完整用法

</script>

</body>

</html>