H5時(shí)代的多行文本框

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

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

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

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

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

有最大高度;

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

在頁(yè)面最頂端，有實(shí)際占位;

實(shí)現(xiàn)方法一：

比如:企鵝微薄

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

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

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

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

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

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

H5及移動(dòng)設(shè)備上輸入框有著如下的共同點(diǎn)：

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

有最大高度;

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

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

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

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

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

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

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