說起輸入框，大家都耳熟能詳了，今天跟大家談一談H5時代的多行輸入框！

首先一起回顧下輸入框在PC端的應(yīng)用：

PC端多行輸入框的實現(xiàn)及問題

多行輸入框，毫無疑問，大家都會想到表單元素textarea標(biāo)簽，在WEB應(yīng)該用上常見的是評論輸入框，微博信息輸入框等，它們有著如下的共同點：

• 有默認(rèn)高度（默認(rèn)三行文字的高度）；
• 有最大高度；
• 超過最大高度即出現(xiàn)垂直滾動條；
• 在頁面最頂端，有實際占位；

實現(xiàn)方法一：

比如:企鵝微博

方法一問題：由于超過默認(rèn)高度后，高度需要實現(xiàn)隨內(nèi)容自動撐開的視覺效果。目前大部分的實現(xiàn)方法是：通過js檢測是否產(chǎn)生滾動條來確定顯示文本域的高度是否動態(tài)增加！對于不會js的小白有沒有更適合的方案呢！當(dāng)然有的！

方法二：div模擬textarea文本域及高度自適應(yīng)

此種方法主要使用的是contenteditable標(biāo)簽屬性，即允許用戶編輯元素內(nèi)容包含的任意文本，包括子元素！使用方法非常簡單，只需要在block元素上加上contenteditable=”true”就可以了，如下demo:

方法二問題：如果您是從其他頁面上拷貝一段內(nèi)容過來，然后粘貼到可編輯模式下的div中，會連HTML也完整的復(fù)制過來的，這種情況下就需要對輸入的內(nèi)容進行HTML字符過濾。

這兩種解決方案同樣也適用于H5頁面！

H5端多行輸入框的實現(xiàn)

H5及移動設(shè)備上輸入框有著如下的共同點：

• 有默認(rèn)高度（一般容納一行內(nèi)容的高度）；
• 有最大高度；
• 超過最大高度即出現(xiàn)垂直滾動條；
• 在頁面最底端，輸入內(nèi)容會呼出鍵盤；

如下圖類似微信客戶端的輸入：

上面提到的PC端的兩種方法也可以實現(xiàn)此效果，同樣的有以下問題：

一、textarea:需要通過js檢測來動態(tài)增加高度,這在移動端，并不是很理想的實現(xiàn)方式；

二、用div模擬：鍵盤被喚醒的時候會將固定在底部的輸入框遮擋住一部分，無論是用absolute還是fixed,都會存在這樣的問題！ （不過不用擔(dān)心，新的系統(tǒng)已經(jīng)解決了這個問題?。?/p>

所以，在做H5的時候，第二種方法很值得一試！

來源：http://ued.ctrip.com/blog/?p=4033