前兩天，因粉絲詢問關(guān)于鍵盤的輸入問題，如何能模擬像軟鍵盤一樣的輸入，可以添加刪除文字，這里模擬一個(gè)稍微簡(jiǎn)單的鍵盤輸入效果，說(shuō)它簡(jiǎn)單是因?yàn)樗恢С肿址牟迦氩僮鳎荒M了全鍵盤和數(shù)字鍵盤，其它功能可以發(fā)揮你的大腦，補(bǔ)充完善，*_^

主要功能描述如下：

1. 支持字母的添加
2. 支持退格效果
3. 可以進(jìn)行大小寫切換
4. 可以切換到數(shù)字鍵盤
5. 單擊輸入框顯示鍵盤，輸入后點(diǎn)擊“搜索”隱藏鍵盤

現(xiàn)在開始。

1、拖一下單行輸入文本放到界面上

2、單行文本輸入框下面畫上軟鍵盤，使用真實(shí)的按鈕，26個(gè)英文字母加上一些其它功能按鈕。具體的按鈕的擺放，按鈕的交互樣式設(shè)置不再贅述，單擊下面的閱讀原文在線查看后下載源文件。

把軟鍵盤部分全部選中轉(zhuǎn)成動(dòng)態(tài)面板，以便于控制顯示、隱藏、鍵盤切換。

3、給動(dòng)態(tài)面板添新加個(gè)狀態(tài)，加上數(shù)字鍵盤

4、添加變量

添加三個(gè)變量，分別保存當(dāng)前輸入的字符串、26個(gè)英文字母的大寫、26個(gè)英文字母的小寫，在切換大小寫字母時(shí)用到，里面的title和rpfile不用管，是用來(lái)顯示教程的標(biāo)題和下載文件的名稱。

5、添加事件處理

1）字母按鈕事件說(shuō)明

str=[[str]][[LVAR1]]，這個(gè)用來(lái)拼接字符串，其中LVAR1為局部變量，給當(dāng)前按下的按鈕上的文字，所有的字母事件一樣，其它字母復(fù)制這個(gè)事件即可，設(shè)置好變量值后，將變量值再重新賦值給輸入框。

2）退格事件說(shuō)明

退格就是刪除當(dāng)前字符串最后一位字母,使用到了字符串的截取函數(shù)substr

3）大小寫切換事件，即shift鍵的處理

單擊后，將26個(gè)按鈕上的英文字母在大寫和小寫之間進(jìn)行來(lái)回切換，使用了之前定義的兩個(gè)變量，其實(shí)就是從兩個(gè)變量里截取對(duì)應(yīng)位置的字符?？梢钥吹脚袛鄺l件里加了判斷a字母里的字符是A時(shí)認(rèn)為現(xiàn)在都是大寫狀態(tài)，否則是小寫狀態(tài)。大寫狀態(tài)時(shí)，從26個(gè)字母小寫變量截取字符，反之從大小變量串中截取字符。

4）數(shù)字鍵盤

數(shù)字鍵盤里的事件和字母鍵盤完全一樣，其它按鈕也加上對(duì)應(yīng)事件

5）空格事件處理

單擊空格時(shí)，只需要在現(xiàn)有str變量后面拼上一個(gè)空格。

所有事件已處理完畢，可以F5鍵本地試一下效果了。

點(diǎn)擊這里查看在線演示效果，內(nèi)附源文件下載

本文由 @Axure原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。