textarea自增高，到最大高度出现滚动条效果

最新推荐文章于 2024-07-15 13:17:25 发布

weixin_30622107

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量265

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/iwenwen/archive/2013/06/09/3128161.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
</head>
<body>
    <textarea  style=" height:16px; line-height:16px; width:800px;" id="textarea3"></textarea>

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

    <script type="text/javascript" src="textareaAutoHeight.js"></script>

    <script type="text/javascript">
        $("#textarea3").textareaAutoHeight({ minHeight: 50, maxHeight: 200}); //最小高度为50px，最大高度为200px
    </script>

</body>
</html>

textareaAutoHeight.js代码如下：

/// <reference path="jquery-1.5.1.min.js" />
$.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).keydown(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();
    }
});

转载于:https://www.cnblogs.com/iwenwen/archive/2013/06/09/3128161.html

weixin_30622107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
textarea自增高，到最大高度出现滚动条效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head></head><body> <textarea style=" height:16p...
复制链接

扫一扫