今天需要些一個回復評論的頁面，設計師給的初始界面就是一個只有一行的框。然后當時就想這個交互該怎么實現比較好，然后想起了新浪微博的做法：點擊評論，默認顯示一行，當輸入的文字超過一行或者輸入Enter時，輸入框的高度會隨着改變，直到輸入完畢。頓時覺得這個細節做得挺不錯的，可以效仿下。下面分享2種實現textarea高度自適應的做法，一種是用div來模擬textarea來實現的，用CSS控制樣式，不用JS；另一種是利用JS控制的（因為存在瀏覽器兼容問題，所以寫起來比較麻煩）；
方法0:textarea高度自適應，隨着內容增加高度增加
$(function(){ $.fn.autoHeight = function(){ function autoHeight(elem){ elem.style.height = 'auto'; elem.scrollTop = 0; //防抖動 elem.style.height = elem.scrollHeight + 'px'; } this.each(function(){ autoHeight(this); $(this).on('keyup', function(){ autoHeight(this); }); }); } $('textarea[autoHeight]').autoHeight(); })
頁面中的textarea直接加屬性就行
<textarea autoHeight="true" readonly="readonly" > </textarea>
pc 移動端都經過測試，沒問題 放心用吧！出自：https://www.cnblogs.com/purple04551/p/8075366.html
方法一：div模擬textarea文本域輕松實現高度自適應
demo演示地址：http://www.xuanfengge.com/demo/201308/textarea/demo1.html
因為textarea不支持自適應高度，就是定好高度或者是行數之后，超出部分就會顯示滾動條，看起來不美觀。
而用DIV來模擬時，首先遇到的問題是：div怎么實現輸入功能？
可能我們還是第一次見到這個屬性contenteditable，如一個普通的block元素上加個contenteditable="true"就實現編輯，出現光標了。如
|
1
|
<div contenteditable="true"></div>
|
contenteditable屬性雖是HTML5里面的內容，但是IE似乎老早就支持此標簽屬性了。所以，兼容性方面還是不用太擔心的。
CSS代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.textarea{
width: 400px;
min-height: 20px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
line-height: 24px;
padding: 2px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
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);
}
|
HTML代碼
|
1
|
<div class="textarea" contenteditable="true"><br /></div>
|
CSS代碼中，因為IE6不支持min/max，所以做了hack，其他的也好理解。
方法二：文本框textarea根據輸入內容自適應高度
demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html
這個寫法是用原生JS寫的，考慮了很多兼容性問題，完全和新浪微博的回復效果一樣的功能。有興趣的童鞋可以仔細分析下代碼。
CSS代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#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);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
/**
* 文本框根據輸入內容自適應高度
* @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();
};
|
HTML代碼（寫在body里面的）
|
1
2
3
4
5
|
<textarea id="textarea" placeholder="回復內容"></textarea>
<script>
var text = document.getElementById("textarea");
autoTextarea(text);// 調用
</script>
|
文章來源：https://www.cnblogs.com/dffy/p/6386318.html
轉自：http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html