Axure绘制密码输入框

当我们在绘制登录页面时，如果登录方式包含账号密码登录，那么我们就会使用到密

码输入框，而常见的密码输入框，通常会使用到小眼睛控制密码的明文和密文显示。

大家知道axure中的输入框，当你设置成密码类型时，会自动显示成密文，如果不做

明密文的切换功能，确实够用了；但是如果需要这个功能，就需要自己进行绘制了，

下面我将为大家展示自己绘制密文输入框的过程。

一、功能解析

主要实现的功能如下

密文状态下，输入的内容以密文的形式展示；点击小眼睛切换到明文状态，且明文

回显密文输入的内容；

明文状态下，输入的内容以明文的形式展示；点击小眼睛切换到密文状态，且密文

回显明文输入的内容；

当输入框获取焦点时，边框显示选中的状态。

由于axure自带的输入框支持设置类型，当text状态下就是明文展示，当类型为密码

状态下就是密文展示；但是axure的交互事件中，并不支持直接设置切换输入框的类

型，所以咱们只能通过动态面板的方式实现该功能

二、原型绘制

1.绘制输入框边框样式

首先拖入一个文本原件，改名为密码；

由于axure自带的输入框边框太丑，所以这里我们自己绘制一个边框；

第步，拖入一个矩形，大小调增到宽200高40；

第步，将其命名为边框；

第步，设置选中状态下的边框颜色。

2.绘制密文输入框

由于文本框类型为密码时，输入框的内容就是展示的密文效果，所以我们在绘制密文

输入框时，仅需要把文本框类型设置为密码类型即可。

第步，拖入文本输入框，大小调整为宽150高30；坐标调整到合适的位置；

第步，将输入框命名为密文输入框；

第步，设置获取焦点时，将边框设置为选中状态；当失去焦点时，将边框设置为未

选中状态；

第步，将输入框的边框设置为隐藏边框。

3.绘制明文输入框

由于密文和明文输入框，样式上没有什么区别，所以直接复制即可；

第步，将密文的输入框和边框选中右键，转化为动态面板；

第步，双击动态面板，将state1状态重新命名为密文状态；

第步，复制密文状态，命名为明文状态。

双击进入明文状态，编辑明文状态下的输入框，将其命名为明文输入框；并将输入框

类型设置成text。

4.绘制密文状态下的小眼睛的交互事件

主要是设置当切换到明文状态后，将当前密文输入框输入的内容设置给明文输入框。

第步，在元件库中搜索眼睛，拖入不可见的小眼睛，调整大小为宽27高20，坐标

调整到合适的位置；

第步，设置点击后切换焦点至明文输入框，将输入框动态面板状态切换到明文状

态；

第步，给明文输入框设置文本内容，插入局部变量LVAR1为密文输入框输入的内

容；

第步，再将明文输入框设置成局部变量LVAR1。

5.绘制明文状态下的小眼睛交互事件

主要是设置当切换到密文状态后，将当前明文输入框输入的内容设置给密文输入框。

第步，在元件库中搜索眼睛，拖入眼睛，调整大小为宽27高20，坐标调整到合适

的位置；

第步，设置点击后切换焦点至密文输入框，将输入框动态面板状态切换到密文状

态；

第步，给密文输入框设置文本内容，插入局部变量LVAR1为明文输入框输入的内

容；

第步，再将密文输入框设置成局部变量LVAR1。

三、效果展示