中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

PC端多行輸入框的實現及問題

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

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

實現方法一：

比如:企鵝微博

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

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

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

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

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

H5端多行輸入框的實現

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

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

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

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

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

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

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

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