textarea如何實現高度自適應（不出現滾動條）
阿新 • • 發佈：2018-12-27
今天需要些一個回覆評論的頁面，設計師給的初始介面就是一個只有一行的框。然後當時就想這個互動該怎麼實現比較好，然後想起了新浪微博的做法：點選評論，預設顯示一行，當輸入的文字超過一行或者輸入Enter時，輸入框的高度會隨著改變，直到輸入完畢。頓時覺得這個細節做得挺不錯的，可以效仿下。下面分享2種實現textarea高度自適應的做法，一種是用div來模擬textarea來實現的，用CSS控制樣式，不用JS；另一種是利用JS控制的（因為存在瀏覽器相容問題，所以寫起來比較麻煩）；
方法一：div模擬textarea文字域輕鬆實現高度自適應
demo演示地址：
因為textarea不支援自適應高度，就是定好高度或者是行數之後，超出部分就會顯示滾動條，看起來不美觀。
而用DIV來模擬時，首先遇到的問題是：div怎麼實現輸入功能？
可能我們還是第一次見到這個屬性contenteditable，如一個普通的block元素上加個contenteditable="true"就實現編輯，出現游標了。如
contenteditable屬性雖是HTML5裡面的內容，但是IE似乎老早就支援此標籤屬性了。所以，相容性方面還是不用太擔心的。
<!doctype html>
<html lang
方法二：文字框textarea根據輸入內容自適應高度(永不出現滾動條)
demo演示地址:
這個寫法是用原生JS寫的，考慮了很多相容性問題，完全和新浪微博的回覆效果一樣的功能。有興趣的童鞋可以仔細分析下程式碼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字框根據輸入內容自適應高度</title>
<style type="text/css">
h2 {
text-align: center;
margin: 50px auto;
}
#textarea {
display: block;
margin: 0 auto;
overflow: hidden;
width: 550px;
font-size: 14px;
height: 18px;
line-height: 24px;
padding: 2px;
}
textarea {
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<script>
/**
* 文字框根據輸入內容自適應高度
* @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();
};
</script>
<script async src="http://c.cnzz.com/core.php"></script>
</head>
<body>
<h2>文字框根據輸入內容自適應高度</h2>
<textarea id="textarea" placeholder="回覆內容"></textarea>
<script>
var text = document.getElementById("textarea");
autoTextarea(text); // 呼叫
</script>
</body>
</html>
再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！https://www.cnblogs.com/captainbed