textarea 的最大高度以及最小高度

1.textarea  高度自适应

function makeExpandingArea(el) {
    var setStyle = function(el) {
        el.style.height = 'auto';
        el.style.height = (el.scrollHeight-8) + 'px';
        console.log(el.scrollHeight);
    }
    var delayedResize = function(el) {
        window.setTimeout(function() {
            setStyle(el)
        },
        0);
    }
    if (el.addEventListener) {
        el.addEventListener('input',function() {
            setStyle(el)
        },false);
        setStyle(el)
    } else if (el.attachEvent) {
        el.attachEvent('onpropertychange',function() {
            setStyle(el)
        });
        setStyle(el)
    }
    if (window.VBArray && window.addEventListener) { //IE9
        el.attachEvent("onkeydown",function() {
            var key = window.event.keyCode;
            if (key == 8 || key == 46) delayedResize(el);

        });
        el.attachEvent("oncut",function() {
            delayedResize(el);
        }); //处理粘贴
    }
}

$(function(){
    
    var sen=document.getElementsByClassName("report_txt");
    
    [].slice.call(sen).map(function(a){
        makeExpandingArea(a);
    })
    
})

 

 

 

 

2.最小高度和最大高度默认

<script type="text/javascript">
$(function(){
$("#textarea3").textareaAutoHeight({ minHeight:25, maxHeight:69 });
})
//最小高度和最大高度默认

//最大高度为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>

转载于:https://www.cnblogs.com/songrimin/p/4460876.html