jquery文本框textarea自适应高度

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_34080903

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量182

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hutuzhu/p/4169808.html

版权

浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：

<body>
        <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none">
        
        </textarea>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //最小高度和最大高度默认
                $("#textarea1").textareaAutoHeight();
                //最大高度为100px
                $("#textarea2").textareaAutoHeight({maxHeight: 100});
                //最小高度为50px，最大高度为200px
                $("#textarea3").textareaAutoHeight({minHeight: 50, maxHeight: 200});
            })


            $.fn.extend({
                textareaAutoHeight: function(options) {
                    this._options = {
                        minHeight: 0,
                        maxHeight: 1000
                    }

                    this.init = function() {
                        for (var p in options) {
                            this._options[p] = options[p];
                        }
                        if (this._options.minHeight == 0) {
                            this._options.minHeight = parseFloat($(this).height());
                        }
                        for (var p in this._options) {
                            if ($(this).attr(p) == null) {
                                $(this).attr(p, this._options[p]);
                            }
                        }
                        $(this).keyup(this.resetHeight).change(this.resetHeight)
                                .focus(this.resetHeight);
                    }
                    this.resetHeight = function() {
                        var _minHeight = parseFloat($(this).attr("minHeight"));
                        var _maxHeight = parseFloat($(this).attr("maxHeight"));

                        if (!$.browser.msie) {
                            $(this).height(0);
                        }
                        var h = parseFloat(this.scrollHeight);
                        h = h < _minHeight ? _minHeight :h > _maxHeight ? _maxHeight : h;
                        $(this).height(h).scrollTop(h);
                        if (h >= _maxHeight) {
                            $(this).css("overflow-y", "scroll");
                        }
                        else {
                            $(this).css("overflow-y", "hidden");
                        }
                    }
                    this.init();
                }
            });
        </script>
    </body>

转载于:https://www.cnblogs.com/hutuzhu/p/4169808.html

weixin_34080903

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery文本框textarea自适应高度

浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：<body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </...
复制链接

扫一扫