• 版本：Axure RP 8.0.0.3303
• (上節)內容介紹：簡單模仿TIM登錄界面，做登錄+取消登錄的功能以及相應的效果，本文重點講的功能有：1. 查看隱藏密碼 2.登錄與取消登錄效果
• (本節)內容介紹：在“上節”基礎上增加字母鍵盤和數字鍵盤，用於輔助電腦鍵盤輸入；
• 後續所講均只介紹“Axure RP 模仿TIM登錄界面(一）”之後新增加內容。

一、繪製界面和控件佈局

1. 增加1個icon(Keyboard)，用戶觸發打開輔助字母鍵盤；
2. 增加矩形框並轉換成動態面板，用於容納字母，默認為隱藏狀態；
3. 增加矩形框並轉換成動態面板，用於容納數字，默認為隱藏狀態；
4. 增加2個全局變量，分別為upperStr、lowerStr，upperStr，用於鍵盤大小寫轉換；
5. 增加1個全局變量，命名為Str,用於記錄數字盤和字母盤輸入的值；

主界面字母盤動態面板

字母盤佈局

數字盤佈局

二、對icon(Keyboard)做交互

• 分析：設計時，動態面板默認為隱藏，數字盤由字母盤調出，關閉字母盤時同時關閉數字盤，且字母盤關閉在字母盤的“關閉”上做交互，所有主界面上，只需要icon做字母盤顯示即可。

1. 對icon(Keyboard)做“鼠標單擊時”交互

調用字母盤

三、對字母盤做交互

• 分析：字母盤具備功能是對密碼框輸入字符，這裡介紹3種功能，1是退格(按序刪除密碼框字符)，2是大小寫轉換，3是按字母后字母寫入密碼框，其餘功能在過程中有過相同的介紹；

1. 對A、B、C等字符做交互，“鼠標單擊時”把文本寫入文本框；
2. 對↑矩形框做交互，“鼠標單擊時”把字母由大寫轉成小寫或由小寫轉成大寫，這裡用到全局變量，當大寫轉成小寫時候，把lowerStr用charAt函數按A與a對應的位置方式進行賦值；
3. 對撤銷符號做交互，“鼠標單擊時”把密碼框字符按序退格，公式為"[[str.substr(0,str.length-1)]]",即從字符串0位置開始截取，0位置也即第一個字符串，截取到str總長度-1的位置，即刪除最後一個字符；

小寫轉大寫

大寫轉小寫

撤銷輸入字符

密碼框增加輸入字符

四、對數字盤做交互

• 分析：數字盤具備功能也是對密碼框輸入字符，所有與字母盤一樣，重複的不介紹，只是為了增加有趣，在字母盤的“@”矩形框和“%”矩形框增加交互，要求不能輸入這2個字符到密碼框中。

1. 對@和%矩形框做交互，顯示密碼提示2秒後自動隱藏。

提示密碼輸入

五、視頻演示