H5時代的多行文本框

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

首先一起回顧下輸入框在PC端的應用：

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

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

有默認高度(默認三行文字的高度);

有最大高度;

超過最大高度即出現(xiàn)垂直滾動條;

在頁面最頂端，有實際占位;

實現(xiàn)方法一：

比如:企鵝微薄

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

方法二：div模擬textarea文本域及高度自適應

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

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

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

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

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

有默認高度(一般容納一行內(nèi)容的高度);

有最大高度;

超過最大高度即出現(xiàn)垂直滾動條;

在頁面最底端，輸入內(nèi)容會呼出鍵盤;

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

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

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

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

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