首页
学习
活动
专区
工具
TVP
发布

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。

三、效果展示

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20221224A0213V00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券