「自適應」高度的 textarea 文本輸入框

寫在前面

那啥，在個人那個很安靜的一個 CSS 羣（羣號：82991297）忽然看到有人在問一個問題。

使用 css 如何實現：textarea 如何實現高度自適應？

當時看到這個問題的時候，我腦中只有一個想法，這個百度一下就夠了，徹底不須要用不少技術人員都喜歡用的谷歌來搜索。然而，這裏有一個關鍵點是「使用 CSS 如何實現」。

能夠用 CSS 實現？

這是個問題，能搜索到的結果必然都是經過 JS 的方式來實現的，而不會有人提到使用 CSS 來實現的，畢竟用 CSS 真的實現不了啊。CSS 主要是用來排版、修飾頁面的，又不是萬能的。

思考

是啊，不是萬能的 CSS 沒法知足這個「自適應」的需求，那麼要如何去實現呢。其實吧，對於「自適應」高度的需求一直都是在你們所追求着，最多見好比就是之前偶爾會有人說一個 div 怎麼自適應高度什麼的。

對於一個 div 自適應高度的話，其實很簡單，只要不設定高度就能夠了。若是這個 div 元素中有 float 屬性，那麼就閉合這個 div 元素（清除浮動）就行了；固然啦，若是是用了 position: absolute; 的話，那就不要說自適應高度了。

假設使用非輸入元素實現

非輸入元素（input 以及 textarea 等之外的元素），咱們能夠利用 contenteditable 屬性來實現，讓一個元素變成能夠編輯、可輸入的元素，那麼也就能夠實現所謂的自適應高度的輸入框了。

<div contenteditable></div>

簡單一句話就能夠知足了。至於兼容性，直接看 http://caniuse.com/#search=contenteditable 這個網址吧。

• IE ✔

• Edge ✔

• Firefox ✘ 2+ ◒ 3+ ✔ 3.5+

• Chrome ✔

• Safari ✔

• Opera ✔

看起棒棒噠，直接就能夠打滿分💯啊！

textarea 元素怎麼實現

可能會有人追求標籤語義化，必定要用 textarea 來實現；也可能會有人說，經過非輸入元素增長 contenteditable 雖然能夠實現輸入，而且也能夠自適應高度了，但會不會有性能上的問題，再或者萬一不當心又兼容性的問題，畢竟仍是有一些瀏覽器時不支持的啊。

是啊，有時候考慮一些問題，老是會有一些萬一的狀況出現，對於這樣的萬一，咱們就乖乖用 textarea 文本輸入框好了。

那問題回來了，怎麼實現 textarea 的自適應高度呢。

其實這個問題也簡單，用 JS 就行了，並且如今網絡上有太多太多的 JS 代碼能夠知足了，因此呢，也沒啥好說的，百度一下就知道了。

這搜索結果，總有一個是能知足的吧，要是不滿意的話，那麼就在谷歌上看看咯。

以爲用中文找到的答案不滿意，還能夠這樣啊，用英文單詞啊。

反正呢，不管怎麼樣，找到的結果是很是多的，可是具體怎麼篩選仍是看各位本身。

嘗試本身寫

不少人都知道，小志我只是一個會一點 CSS，卻不會 JS 的人，因此，我也一直找不到好工做，怪我本身，恩，都是我本身的錯。

因而，我想，要不本身嘗試一下吧。

<textarea id="ta" rows="1"></textarea>

function $(id) {
  return document.getElementById(id); } $("ta").onkeyup = function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + "px"; }

textarea {
    display: block;
    width: 300px;
    height: 34px;
    overflow: hidden;
    padding: 5px 10px;
    margin: 30px auto 0;
    resize: none;
    line-height: 24px;
    font-size: 16px;
    color: #666;
    border: 1px solid #ccc;
    outline: 0 none;
    box-shadow: 0 0 5px #999;
    border-radius: 3px;
    box-sizing: border-box;
    transition: all 200ms linear;
}

textarea:focus {
    color: #277fe4;
    border-color: #2196f3;
    box-shadow: 0 0 5px #03a9f4;
}

本來我想不要用 keyup 吧，把 change 和 keydown 都放進去，不過想一想，直接使用 keyup 彷佛也夠了，因此就這樣了，效果上來講，我本身也滿意了。就是不知道兼容性什麼的會怎麼樣😅。

不過在這裏我真以爲我這段 JS 是頗有問題的，這也太簡單點了不是麼。😁

this.style.height = 'auto';

若是沒有了這句話，當輸入框中的內容減小後，高度就縮不回去了；而有了這句話後，由於 height: auto; 致使 transition 的過渡效果就沒有了，總體上就是一抖一抖的，不舒服啊。

哦，還有一個狀況，就是在 textarea 標籤中，我給了一個 rows="1" 的屬性。這個主要是控制 textarea 的行數，若是缺乏了這個的話，就會變成這樣了。

隨便來一下，輸入框的高度就變化了，可是這個時候並無回車到第二行，因此我加了 rows="1"，這樣的話就安心了。

最後

感受這篇又是爲了「政治」任務而寫的，很久沒更新公衆號，內心就感受少了點什麼似的。其實有時候想一想，寫 CSS 方面的東西，有一些新的內容呢，都是草案之類的，瀏覽器支持都是一個問題，拿出來講也就那麼一說；寫一些舊的內容呢，其實網絡上搜搜一大片，挺矛盾的。

跟朋友聊了以後，他們說，這個公衆號你是當本身的博客來用的，那麼何須在乎那麼多，想寫點什麼就寫點什麼咯。

想一想也是，有一些不想寫太多的，就在小密圈裏隨便寫一點吐槽一下，偶爾就在公衆號裏多廢話幾句。

立刻週末了，週末愉快！