textarea高度自動撐開_實現textarea高度自適應

textarea高度自適應，textarea高度自動增高，textarea高度自動撐開，本文通過復制textarea的html給另外一個元素pre,由於設置pre自動展開，所以不會存在有滯留的感覺，交互效果較好。

 

技術原理

textarea高度自適應是一個比較常用的前端開發效果。 在新浪微博的輸入框中也有這個效果，不過它那個效果不怎么好看，高度展開有點延遲，可能是通過給高度賦值scrollHeight.而下面這個則是通過復制textarea的html並另外一個元素pre,由於設置pre自動展開，所以不會存在有滯留的感覺，交互效果較好。

 

兼容情況

在使用之前，推薦兩個比較好的事件，分別是oninput和onpropertychange，在textarea發生變化時，可以通過監聽這兩個事件來觸發你需要的功能，看一下兼容情況：

 

Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。

oninput 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發（在 IE9 中只在輸入、粘貼、鼠標粘貼時觸發）。

onpropertychange 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發（在 IE9 中只在輸入、粘貼、鼠標粘貼時觸發）（僅 IE 支持）。

backspace、delete 兩個按鍵的 keyCode 分別為 8、46。

oncut 事件在粘貼（ctrl + v）、鼠標粘貼時觸發。

 

 

演示代碼

HTML代碼：

<div class="expandingArea " id="textarea"> <pre><span></span><br></pre> <textarea></textarea> </div>

js：

function makeExpandingArea(container) { var area = container.getElementsByTagName('textarea')[0] ; var span = container.getElementsByTagName('span')[0] ; if (area.addEventListener) { area.addEventListener('input', function() { span.textContent = area.value; }, false); span.textContent = area.value; } else if (area.attachEvent) { area.attachEvent('onpropertychange', function() { var html = area.value.replace(/n/g,'<br/>'); span.innerText = html; }); var html = area.value.replace(/n/g,'<br/>'); span.innerText = html; } if(window.VBArray && window.addEventListener) { //IE9 area.attachEvent("onkeydown", function() { var key = window.event.keyCode; if(key == 8 || key == 46) span.textContent = area.value; }); area.attachEvent("oncut", function(){ span.textContent = area.value; });//處理粘貼 } container.className += "active"; } var areas = document.getElementById('textarea') ; makeExpandingArea(areas);

當然如果你不追求用戶體驗的話，則可以只使用textarea，並加入一個簡單的代碼就能夠搞定。可以使用上面同樣的兩個事件來監聽其觸發textarea的動作，並賦予textarea的高度為它的scrollHeight。

https://www.98891.com/article-23-1.html

使用scrollHeight方法

只需要一個textarea： 

HTML代碼：

<textarea id="textarea"></textarea>

JavaScript代碼：

function makeExpandingArea(el) { var timer = null; //由於ie8有溢出堆棧問題，故調整了這里 var setStyle = function(el, auto) { if (auto) el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } var delayedResize = function(el) { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function() { setStyle(el) }, 200); } if (el.addEventListener) { el.addEventListener('input', function() { setStyle(el, 1); }, false); setStyle(el) } else if (el.attachEvent) { el.attachEvent('onpropertychange', function() { setStyle(el) }) setStyle(el) } if (window.VBArray && window.addEventListener) { //IE9 el.attachEvent("onkeydown", function() { var key = window.event.keyCode; if (key == 8 || key == 46) delayedResize(el); }); el.attachEvent("oncut", function() { delayedResize(el); }); //處理粘貼 } } var textarea = document.getElementById('textarea'); makeExpandingArea(textarea);