使用app时，经常需要有需要输入内容的地方，诸如输入用户名(手机号)、密码、验证码，以及完善信息等，这个时候app会调用系统中输入法。也有些时候因为安全性等原因，部分app中会使用自带的输入法，来保证输入的内容的安全性，这个时候往往app开发者会在特殊的地方（比如输入密码）来调用自己的输入法。本文使用Axure 9 模拟民生银行的输入法做了一个，具体样子就长成下面这个样子。该案例中，键盘可以向任意一个文本输入框中输入内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
一、数字键盘文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1、准备元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1）矩形元件：12个（可先准备一个，做完交互后复制）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2）热区元件：12个（可先准备一个，做完交互后复制）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
3）退格图标：1个；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
二、添加用例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1、设置矩形元件数值为1(以1为例)，并将该矩形命名为1，同时设置矩形1交互样式(选中)填充颜色(自行选择一个颜色即可，为的是点击时有按下的效果)；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2、给矩形1添加鼠标按下时和鼠标松开时用例。在鼠标按下时设置矩形1为选中状态；在鼠标松开时设置矩形1为取消选中；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
3、给热区添加用例。使用热区的目的是因为热区是一个没有文字(不能获取焦点)的透明元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1）将热区覆盖在矩形1上方，点击鼠标按下时和鼠标松开时触发矩形1对应的用例；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2）单击热区时，改变焦点元件的文字为：[[焦点元件文字]][[矩形1文字]]；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
4、至此数字键盘中“1”这个按键的用例已经完成了，接下就是复制9个矩形1和热区，分别将矩形1的文字和名称改为0、2、3、4、5、6、7、8、9，并按照数字键盘布局放置；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
5、再复制2个矩形1，一个用来切换键盘内容，设置内容为abc；一个用来作为删除操作，与退格图标合并一起；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
6、将以上元件选中转化为动态面板，并将面板状态名称为“123”，同时添加另外一个面板状态为“abc”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
7、设置退格用例。在退格矩形对应热区上设置单击时，设置焦点元件内容为：焦点元件现有的内容去掉最后一位，此处需要使用字符串函数substr(start,length)。该函数的作用是截取字符串；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
8、设置切换键盘矩形“abc”。点击“abc”按键时，切换面板到“abc”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
二、字母键盘文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1、准备元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1）复制矩形1。复制数字键盘中的矩形1和对应的热区，共26个，分别设置内容和名称为英文26个字母；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2）复制数字键盘中的退格操作元件（矩形+热区+退格图标）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
3）添加字母大小写切换图标（矩形+热区+切换图标+圆点），其中圆点表示大写；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
4）复制矩形键盘“abc”，并将内容和名称设置为“123”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
5）民生银行图标；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
6）键盘图标，用来隐藏键盘；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2、添加用例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
1）26个英文字母的用例同矩形1，不用处理；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
2）退格操作的用例同数字键盘，不用处理；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
3）矩形键盘“123”的用例同“abc”，不用处理；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
4）键盘图标的用例，点击时隐藏键盘面板即可；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
5）字母大小写切换用例。首先将字母大小写组合元件中的圆点隐藏，通过圆点的可见性作为条件，判断当前字母的大小写，本案例中默认字母是小写，圆点默认隐藏，显示时代表字母为大写状态；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
①给热区设置单击用例，如果圆点隐藏，则设置26个按键内容为a~z；如果圆点显示，则设置26个按键内容为A~Z；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
此处用到大小写字母切换的函数toLowerCase()和toUpperCase()。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
到此本案例的交互已经全部实现，在做原型时，在任意文本获取焦点时候，显示该键盘，即可对文本进行输入或删除操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29779.html