文字框背景分段顯示功能在web開發中用得不是很多。我見過的只是在部分網上銀行輸入銀行卡號的時候，有過這個效果。輸入4位數字後，後面4位數字的背景變成灰色，接著又回到前面4位數字的背景，以此類推。主要是幫助使用者快速區分連串的字元，從而核對輸入的資訊是否正確。當然這類功能應用範圍就比較窄了，一般來說，輸入的資訊需要具備一定的統一格式（字元型別）和長度的情況下使用會起到提供使用者體驗的效果，反之則有點畫蛇添足了。比如銀行卡號，和身份證號就是比較常見的適合這一要求的字段。
剛剛上線的專案中正好需要實現這樣的功能。並且有兩種情況，乙個是身份證號代表出生日期的部分需要顯示不同的背景顏色，另乙個是車架號，發動機號每4位背景顏色改變。為了**重用和擴充套件性，決定開發乙個外掛程式，通過config來實現類似的個性化功能。
目前，我所見過的類似功能都是使用背景來實現的。使用背景有幾個不足的地方，比如針對每個特定的案例需要製作特定的、當文字框中有中文，英文數字甚至特殊符號的時候，這個方案就失效了。既然使用達不到要求，就得換一種思路。
經過一番思考後，我終於找到了一種可行的方案：在文字框的底層新增幾個span標籤來充當分段背景的容器，文字框的分段背景轉化為span標籤的背景。通過js獲取使用者輸入字元，並且按配置取得每段的字元，將他們寫入每段對應的span，並將span裡的文字顏色設定為span的背景色，從而隱藏文字。這樣就能實現使用者輸入字元，實時顯示背景。有了方案當然就開始實現，由於專案中使用了jquery控制項庫，自然這個文字框分段背景就是基於jquery的，也可以說是jquery的乙個外掛程式。下面貼出**，由於專案匆忙，沒有優化**，**中較詳細的注釋，不再多說。
[img]
建立文字框背景
1.1利用bitblt建立位圖背景 只會按位圖原始尺寸進行載入 bool cle 11 3view onerasebkgnd cdc pdc 1.2利用strtchblt建立位圖背景 bool cle 11 3view onerasebkgnd cdc pdc todo 在此新增訊息處理程式 和 或...
QT 文字框多行顯示
qt 文字框多行顯示 使用pyqt中的font和qfontmetrics類。qfontmetrics中有乙個函式是horizontaladvance可以獲取覆蓋字串所需要的矩陣的畫素寬度，height可以獲得字串所需要的矩陣的畫素高度，然後根據這個畫素寬度，再裁切下字串就可以自動換行了。qfont ...
MFC程式 更改 文字框 控制項背景
下面的例子是將應用程式對 話框設定為藍色背景和紅色文字 對於分布在對話方塊上的控制項，我們可以修改其顏色 其背景顏色，比如對靜態文字 文字編輯框 列表框等等。過載onctlcolor cdc pdc,cwnd pwnd,uint nctlcolor 即wm ctlcolor訊息。具體步驟如下 以上例...