场景:我们需要为页面的textarea文本域设置自适应高度,需要满足输入文字如果超出高度即自动增高,而且最好能够支持ctrl+v等操作,以下是同事寻找来的一段代码,特此记录。

代码:

/**
* 文本框根据输入内容自适应高度
* @param  {HTMLElement} 输入框元素
* @param  {Number}      设置光标与输入框保持的距离(默认0)
* @param  {Number}      设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];
 
                        if (name === 'height' && val.search(/px/i) !== 1) {
                                var rect = elem.getBoundingClientRect();
                                return rect.bottom - rect.top -
                                        parseFloat(getStyle('paddingTop')) -
                                        parseFloat(getStyle('paddingBottom')) + 'px';        
                        };
                        return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
 
        elem.style.resize = 'none';
 
        var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;
 
                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;
 
                if (!isFirefox && !isOpera) {
                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                        if (maxHeight && elem.scrollHeight > maxHeight) {
                                height = maxHeight - padding;
                                style.overflowY = 'auto';
                        } else {
                                height = elem.scrollHeight - padding;
                                style.overflowY = 'hidden';
                        };
                        style.height = height + extra + 'px';
                        scrollTop += parseInt(style.height) - elem.currHeight;
                        document.body.scrollTop = scrollTop;
                        document.documentElement.scrollTop = scrollTop;
                        elem.currHeight = parseInt(style.height);
                };
        };
 
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
};

调用代码:

	/**
	 * 默认所有文本域自适应高度,可以增加class为notAutoHeight进行过滤
	 */
	$("textarea").each(function(){
		if(!$(this).hasClass('notAutoHeight')){
			this.style.overflowY = 'hidden';
			autoTextarea(this);
		}
	})


或者使用以下代码也是可以实现的。

/***
 * textarea的自动伸缩
 * @param ID textarea的id
 * 注释:此方法已经不建议使用
 */
function MaxMe(id) {
	var o = document.getElementById(id);
	if(typeof(o) != 'undefined'){
		if (window.navigator.userAgent.indexOf("Firefox") > -1) {
			o.style.height = o.scrollTop + o.scrollHeight + "px";
		} else if (o.scrollTop >= 0){
			o.style.height = o.scrollTop + o.scrollHeight + "px";
		}
		if(parseInt(o.style.height) < 100){
			o.style.height = "100px";
		}
	}
}





浏览 715 评论 0 赞 0 砸 0 标签: demo javascript
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款