青铜修炼手册:Axure输入密码与退格的交互效果

我想大家可能都试过在使用支付宝或者微信的时候最后都是需要输入密码来进行支付结账的,今天刚好小编学习了如何使用Axure把键盘上的字输进文本框内,由于本人比较懒,本来是想弄一个26字母键盘的,结果还是想想算了,弄一个数字键盘就好了,反正都是一样的=,=,同样的配方,同样的味道,现在就让我们开始吧。

实现步骤:

1.在画布中放入一个,导入一张支付页面的背景图,然后大小按照实际自己调整一下;再放入10个矩形做成数字按键;再然后两个灰色矩形和一个图片原件,图片原件导入一张退格键的图标,并与右侧灰色矩形组合到一起,将组合命名为“BackspaceGroup”,如图所示:

           2.在画布中放入6个文本框,调整好位置,将文本框命名为“Password01~Password06”,将6个文本框的类型设置为“密码”,最后,放入一个文本标签,命名为“TempText”,用于保存输入的数字,将这个原件在快捷功能中勾选“隐藏”复选框,将其默认设置为隐藏状态:

          3. 为任意一个数字按键添加【鼠标单击时】的交互;设置条件为“元件文字长度”于元件“TempText”【<】【值】“6”;添加满足条件时的动作为“设置文本”->“TempText”->"值"为“[[Target.text]][[This.text]]”;公式的作用为将目标元件目前的文字后方连接上被单击的数字按键元件上的文字:

           4.继续为数字按键添加【鼠标单击时】的交互;设置动作为“设置文本”于元件“Password01~Password06”,“值”中分别填写“[[t.charAt(5)]]”、“[[t.charAt(4)]]”、“[[t.charAt(3)]]”、“[[t.charAt(2)]]”、“[[t.charAt(1)]]”、“[[t.charAt(0)]]”;公式中的“t”为局部变量,存储的内容为元件“TempText”的元件文字;这一步就通过公式获取了元件“TempText”里面的各个字符,然后,通过动作写入到密码框的各个文本框中:

             5. 选中设置好的交互数字按键,然后选中【鼠标单击时】的名称,通过右键“复制”,然后将其“粘贴”到其他数字按键中:

             6. 同样,将数字按键的【鼠标单击时】交互内容粘贴到退格组合“BackspaceGroup”的交互事件【鼠标点击时】中,清除交互条件,修改第一个动作【设置文本】于元件“TempText”中的公式为“[[Target.text.substr(0,Target.text.length-1)]]”;公式的作用是将目标元件目前的文字进行截取,截取的起始位置为第一个字符,截取的长度为目标元件当前文字的长度减1:。如图所示:

         7.点击浏览,就完成了

    原型查看效果地址:https://5zsm88.axshare.com

     原型RP文件下载地址:https://download.csdn.net/download/qq_27884377/10583491

猜你喜欢

转载自blog.csdn.net/qq_27884377/article/details/81410808
今日推荐