Axure RP9 如何借助动态面板实现密码输入框字符显示/隐藏切换

不论是移动端还是PC端的登录，目前大多都是可以切换显示与隐藏密码框中所输入的内容，以保证用户在登录报错的时候，可以确认自己所输入面的正确性，修正后再次进行登录。

Axure RP升级到9之后，元件及交互的使用与之前的RP 8相比，都有了一些不同，借鉴了小楼老师Axure RP8.0教程后，基于Axure RP 9来简单聊一下如何用借助态面板实现密码输入框字符显示/隐藏切换。

第一步，也先来捋一下，我们用到的元件（图1）

图1-整体元件组成示意图

1、隐藏密码icon（非SVG图片，而是导入的外部元件）

2、显示密码icon（非SVG图片，而是导入的外部元件）

3、动态面板，使用两个状态，两个状态中分别放入不同类型的文本框，在同一个区域，切换不同的元件类型

第二步，不同元件的样式及交互设置

1、隐藏密码icon（图2）

想要实现的需求是，点击“隐藏密码icon”后，出现的是“显示密码icon”，因此选择为该元件添加【单击时】的【显示/隐藏】事件，单击时隐藏当前，显示另一个

图2-隐藏密码icon交互设置

2、显示密码icon（图3）

逻辑同1，只是要反向思考，因为我们这次想实现的是：点击“显示密码icon”后，出现的是“隐藏密码icon”，同样为该元件添加【单击时】的【显示/隐藏】事件

图3-显示密码icon交互设置

3、动态面板-密码框-元件样式设置

3.1 State 1-隐藏密码文本框（图4）

图4-动态面板-State1 - 密码类型文本框

3.2 State 2-显示密码文本框（图5）

图5-动态面板-State2 - 文本类型文本框

3.3 两个State下的文本框边框都需要进行隐藏（图6）

图6-文本框边框隐藏

4、动态面板-密码框-元件交互设置

我们想要实现的一直都是：初始输入时密码为隐藏状态，点击“隐藏密码icon”后，出现“显示密码icon”，且密码框内的密码变为可见状态。就需要为动态面板的文本框添加【文本改变时】的【设置文本】事件，使其中一个文本框的文本改变时，另一个文本框的文本也能随之同步。

4.1 State 1-隐藏密码文本框（图7）

图7-State 1-隐藏密码文本框-交互设置

4.1 State 1-显示密码文本框（图8）

图7-State 2 -显示密码文本框-交互设置

第三步，确认最终交互设置

动态面板-文本框的交互改变，也是基于“显示密码icon”与“隐藏密码icon”的【单击时】事件，因此将动态面板的【文本改变时】的【设置文本】事件，添加到“显示密码icon”与“隐藏密码icon”的【单击时】事件内。

最终交互设置如下（图8）：

图8-最终交互

通过以上步骤，我们就成功的在Axure RP9中借助动态面板实现密码输入框字符显示/隐藏切换交互。

最近刚升级使用Axure RP9 ，许多还在摸索中，以上如有不足之处，欢迎评论区批评指正，谢谢。

参考资料：

1、密码输入框字符显示与隐藏切换 – Axure原创教程网

2、Axure 9.0基础教程：史上最详细的元件说明，建议你认真看完（一） -