jquery文本框textarea自适应高度

浏览数：33 / 时间：2015年06月09日

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

<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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。