Axure密码输入框字符显示与隐藏切换

Axure密码输入框字符显示与隐藏切换

现在的软件基本都需要注册账号才能进行登录,既然有账号,肯定就需要密码,不过密码也可以设置为隐藏或者显示,那么如果我们要用Axure实现密码输入框字符显示与隐藏切换的状态该怎么做呢?

接下来,我带大家一起来实现这样的一个密码输入框。

首先,先来分析一下,我们需要用到哪些元件。

1、在Axure中,文本框并不能直接实现显示和隐藏密码的功能。

我们需要两个文本框,一个是普通的文本框,另外一个是隐藏字符的密码框;

2、在同一个区域切换上述两个文本框,我们需要使用动态面板。

动态面板可以添加多个状态,每个状态放入不同的内容,并且可以通过切换状态来显示这些不同的内容。

3、显示与隐藏密码的按钮我们可以使用两张眼睛形状的图片。

4、我们还需要放入一个矩形做成背景,将输入框的样式变得更好看一些。

元件的组成和摆放如下图所示:

注意:动态面板的两个状态中,分别放入了不同的文本框。

第一个状态中:

Axure隐藏边框

第二个状态中:

Axure隐藏边框

两个文本框的背景颜色我们可以取消,这样就能呈现背景矩形的颜色。

Axure取消填充颜色

另外,眼睛的图标在点击时需要切换为另外一个。

我们可以通过在交互样式设置【选中】的图片,然后再通过改变图片的选中状态,形成图片的切换。

Axure图片

完成元件的准备之后,接下来我们就可以添加交互了。

1、完成文本框内容的同步。

为任何一个文本框的【文本改变时】添加交互用例,设置动作为【设置文本】于另外一个文本框为当前元件的【元件文字】。

以文本框“HidePassword”为例:

Axure设置文本

最终两个文本框的交互如下:

2、点击眼睛图标的时候,图标需要切换成另外一个图标。

我们为眼睛图标添加【鼠标单击时】的交互用例,设置当前元件【切换选中状态】。

3、在眼睛图标切换的同时,还需要切换动态面板的状态。

我们为眼睛图标的【选中改变时】添加交互用例,【设置面板状态】为【Next】,并且勾选【向后循环】的选项。

这里注意,【向后循环】这个选项必须勾选,否则,动态面板切换到第二个状态后,不会再切换回第一个状态。

以上就是关于 Axure密码输入框字符显示与隐藏切换的教程,希望对你有帮助,更多教程点击文章:Axure有哪些很实用的小技巧

在线客服
客服邮箱
客服电话
17051276424