<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autoTextarea</title>
<script type="text/javascript">
var autoTextarea = window.autoTextarea = {
/**
* 文本框根据输入内容自适应高度
* cfg {
elem:elem,
extra:extra,
maxHeight:maxHeight,
initEvent:initEvent,
initScroll:initScroll,
changeHeight:changeHeight
* }配置参数
* {elem} 输入框元素
* {extra} 设置光标与输入框保持的距离(默认0)
* {maxHeight} 设置最大高度(可选)
* {initEvent} 是否初始化文本框高度(可选true或false)
* {initScroll} 是否初始化文本框滚回顶部(可选true或false)
* {changeHeight} 回调函数
*/
fn: function (cfg) {
if (!cfg) {
return;
}
var elem = cfg.elem,
extra = cfg.extra || 0,
maxHeight = cfg.maxHeight || '',
initEvent = cfg.initEvent || false,
initScroll = cfg.initScroll || false;
var addEvent = function (type, callback) {
elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback);
};
var getStyle;
if (elem.currentStyle) {
getStyle = 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;
};
} else {
getStyle = function (name) {
return getComputedStyle(elem, null)[name];
};
}
var minHeight = parseFloat(getStyle('height')) >= 0 ? parseFloat(getStyle('height')) : 0;
elem.style.resize = 'none'; // 如果不希望使用者可以自由的伸展textarea的高宽可以设置其他值
var change = function (type) {
var height;
var style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight >= minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight;
style.overflowY = 'hidden';
}
style.height = height + extra + 'px';
if (initScroll) {
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
}
elem.currHeight = parseInt(style.height);
if (cfg && typeof cfg.changeHeight === 'function') {
cfg.changeHeight(height + extra);
}
if (type == 'keydown' || type == 'input') {
elem.focus();
}
}
};
if (initEvent) {
change();
}
addEvent('focus', function () {
change('focus');
});
addEvent('input', function () {
change('input');
});
}
};
</script>
<style type="text/css">
*{padding: 0px;margin: 0px;}
textarea {
width: 200px;
min-height: 20px;
padding: 4px 6px;
outline: 0;
resize: none;
border-radius: 2px;
line-height: 20px;
overflow-y:hidden;
font-size: 12px;
font-family: "Microsoft YaHei",SimHei,Arial
}
</style>
</head>
<body>
<textarea name="content" rows="1" id="simulation-textarea" class="simulation-textarea validate ipt" type="text">
随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单
</textarea>
<script type="text/javascript">
window.onload = function(){
autoTextarea.fn({
elem: document.getElementById('simulation-textarea'),
//extra:20,
//maxHeight:80,
initEvent: false,
//initScroll:false
});//elem为输入框元素，initEvent为文本默认有内容的时候初始化文本域高度
}
</script>
</body>
</html>
网友评论