前兩天，因粉絲詢問關于鍵盤的輸入問題，如何能模擬像軟鍵盤一樣的輸入，可以添加刪除文字，這里模擬一個稍微簡單的鍵盤輸入效果，說它簡單是因為它不支持字符的插入操作，只模擬了全鍵盤和數字鍵盤，其它功能可以發揮你的大腦，補充完善，*_^

主要功能描述如下：

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

現在開始。

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

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

把軟鍵盤部分全部選中轉成動態面板，以便于控制顯示、隱藏、鍵盤切換。

3、給動態面板添新加個狀態，加上數字鍵盤

4、添加變量

添加三個變量，分別保存當前輸入的字符串、26個英文字母的大寫、26個英文字母的小寫，在切換大小寫字母時用到，里面的title和rpfile不用管，是用來顯示教程的標題和下載文件的名稱。

5、添加事件處理

1）字母按鈕事件說明

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

2）退格事件說明

退格就是刪除當前字符串最后一位字母,使用到了字符串的截取函數substr

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

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

4）數字鍵盤

數字鍵盤里的事件和字母鍵盤完全一樣，其它按鈕也加上對應事件

5）空格事件處理

單擊空格時，只需要在現有str變量后面拼上一個空格。

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

點擊這里查看在線演示效果，內附源文件下載

本文由 @Axure原型設計工場?原創發布于人人都是產品經理?，未經許可，禁止轉載。