编者按:我们经常使用Axure进行交互设计，比如输入密码、验证码界面、弹出窗口等。虽然都是小设计，但在整体体验上很重要；本文作者分享了关于APP支付密码键盘输入效果的解释。我们一起来看看。

在Axure中，有很多常用的交互事件，如检查/取消选择、启用/禁用、显示/隐藏等。

然后，在本教程中，我们将讲解一个相对冷门的交互事件，focus事件的应用，以及如何使用focus事件绘制APP支付密码的键盘输入效果。

APP支付密码键盘输入效果

我们先来看看竣工效果图。可以看到，APP支付密码键盘输入效果的主要组成部分包括:

页面载入时，获取输入框1为焦点；点击键盘时，自动输入对应数字；当焦点框输入数字后，焦点自动跳至下一框；删除时，当焦点框被清空时，焦点自动跳到上一框。

支付密码界面初稿

为了节省时间，我们提前准备了设置支付密码的界面初稿。下面来说明一下如何画出密码键盘的输入效果。

01步骤1:设置为加载时自动获得焦点

首先点击画布的白色部分空(不选择任何组件)，在右栏的交互中依次点击新建交互-页面加载-获取焦点-输入框1；这里的交互是指页面加载时，输入焦点落在输入框1上。

在不选择任何组件的情况下，单击新建交互-页面加载时-获得焦点-输入框1

然后选择所有输入框，点击右栏的全部显示，展开所有属性，最大长度填入1。这里的交互是指将所有输入框的最大输入长度限制为1位。

选择所有输入框，然后单击全部显示

将最大长度设置为1

第二步:输入时设置焦点跳转效果

首先选择输入框1，在右栏的交互中依次点击新建交互-文字变化时-获得焦点-输入框2；然后点击启用情况，打开情况编辑窗口，在弹出窗口中点击添加条件，将第三个下拉菜单修改为！=(不等于)。

选择输入框1，然后单击新建交互

当文本改变时，再次点击获得焦点输入框2

然后单击启用方案，打开方案编辑窗口

在情况编辑窗口中点击【增加条件】，将第三个菜单修改为！=

这里的交互是指如果当前组件(输入框1)有输入字符，焦点跳转到下一个焦点(输入框2)。

因此，按照这个方法，我们可以在输入框2~6中设置焦点事件。先点击右栏选择要更改的文本，按Ctrl+C(将交互复制到剪贴板)，逐个选择输入框2~6，再按Ctrl+V(将交互粘贴到输入框2 ~ 6)；然后，交互中的采集焦点一个接一个变成3~6(输入框6中的下一个焦点还是它自己)。

第二步是其中一个输入框的交互

第三步:设置删除时的焦点跳转效果

前向焦点跳转在上一步中设置，但反向焦点跳转在这一步中设置。根据上一步的交互逻辑，推导出思路:如果当前组件清除了空个字符，焦点跳转到上一个焦点。

首先选择输入框6，点击右栏文本变化时的启用情况，打开情况编辑窗口，点击弹出窗口中的添加条件，保留默认条件，点击确定直接关闭弹出窗口。

选择输入框6，点击【增加情况】，打开情况编辑窗口

在情况编辑窗口中单击“添加条件”，然后直接单击“确定”

然后点击案例2中的添加动作，再依次点击获取焦点-输入框5；这里的交互是指如果当前元素(输入框6)为空，焦点跳转到上一个反向焦点(输入框5)。

单击方案2的添加操作

然后单击获取焦点-输入框5

同样，按照这个方法，我们可以在输入框5~1中设置反向聚焦事件。先点击右栏文字变化时选中的情况2，按Ctrl+C(将交互复制到剪贴板)，逐个选择输入框5~1，再按Ctrl+V(将交互粘贴到输入框5 ~ 1)；然后把交互中的采集焦点一个个改成4~1(输入框1的下一个反向焦点还是它自己)。

第三步是其中一个输入框的交互

第四步:设置密码键盘输入效果

首先选择1键，在右栏的交互中依次点击新建交互-点击时间-设置文本-焦点元素，将值设置为1。

选择1键，单击新建交互-单击-设置文本-焦点组件，并将值设置为1

这里的交互意味着当点击1键时，焦点元素的文本被设置为1。同样，按照这个方法，我们可以设置其他键盘的点击事件。

所以，点击右栏1键的交互(点击时)，按Ctrl+C(将交互复制到剪贴板)，逐个选择其他键，再按Ctrl+V(将交互粘贴到其他键)；然后将交互中焦点组件的值一个个修改为对应的文本(Del键的文本为空)。

第四步，删除按键的交互

05结论

OK，通过前四步，完成APP支付密码键盘输入效果；但是细心的同学可能会发现，为什么输入6位密码后就被删除了，如果只想删除一半呢？

这个我就留给学生自己挖吧。建议你可以通过判断输入框名称是否为空来控制删除当前框或前框。