H5時代的多行文字框

2021-08-18 04:39:19 字數 1048 閱讀 6466

**:

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

首先一起回顧下輸入框在pc端的應用:

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

有預設高度(預設三行文字的高度);有最大高度;超過最大高度即出現垂直滾動條; 在頁面最頂端,有實際佔位;

實現方法一:

比如:企鵝微薄

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

方法二:div模擬textarea文字域及高度自適應

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

方法二問題:如果您是從其他頁面上拷貝一段內容過來,然後貼上到可編輯模式下的div中,會連html也完整的複製過來的,這種情況下就需要對輸入的內容進行html字元過濾。

這兩種解決方案同樣也適用於h5頁面!

h5端多行輸入框的實現

h5及移動裝置上輸入框有著如下的共同點:

有預設高度(一般容納一行內容的高度);有最大高度;超過最大高度即出現垂直滾動條; 在頁面最底端,輸入內容會撥出鍵盤;

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

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

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

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

PyQt5多行文字框QTextEdit文字改變事件

文字內容一旦改變則觸發事件 使用裝飾器定義訊號和槽函式,結合文字改變事件textchanged import sys from pyqt5.qtcore import pyqtslot,qmetaobject class mainwindow qwidget def init self super ...

H5時代的新儲存簡介

1.webstorage 分為 sessionstorage和localstorage兩種,除了session的生命週期是在該域全部頁面被關閉後就被清除而local是無限期存在外,二者的使用與方法屬性事件都相同。簡介 cookie未來的替代品。有儲存量大 穩定 訪問簡便的優點,缺點是安全性,雖然每個...

C TextBox多行文字框的字數限制問題

前言 textbox元件 文字框元件 是一種常用的,也是比較容易掌握的元件。應用程式主要使用它來接收使用者於輸入文字資訊。在visual c 中,多行文字框使用的也是 textbox,只不過其 multiline 屬性為 true。nclagy要注意,其仍然有字數限制,maxlength 屬性預設值...