<!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>
textarea文本框內容高度自適應
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- html： <textarea type="text" class="mui-input-clear bz_ipt...
- 借鑒Element-ui中源碼方法實現H5頁面中textarea自適應高度方法 直接上方法和使用吧（vue項目） ...
