• 版本：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秒后自动隐藏。

提示密码输入

五、视频演示