美文网首页
axure制作密码框(密码可见与隐藏)

axure制作密码框(密码可见与隐藏)

作者: 小金同学丶 | 来源:发表于2019-12-22 01:03 被阅读0次

常见的密码框可以切换密码的隐藏与可见性,那我们该怎么实现这个功能呢?

界面:输入框,切换状态的小眼睛。

方法:

一、基本元件

1.从元件库拖出一个输入框,生成动态面板并命名。

2.准备两张图片作为切换状态的按钮并分别命名为密码可见和密码不可见。(自己画了一个丑丑的眼睛。)

在动态面板中复制一个输入框,分别命名为密码可见和密码不可见。

将可见的输入框格式设置为Text,隐藏的输入框格式设置为密码;

二、交互

输入框的交互:

隐藏输入框的交互:设置文本改变时,把不可见输入框的值赋给密码可见输入框。

同理得出可见输入框的交互。

眼睛动态面板的交互:

设置眼睛动态面板,设置条件,当鼠标单击时,切换到下一个面板,并将焦点设置在下一个面板的输入框;

当面板为眼睛为睁眼状态时,设置输入框面板为可见,焦点在可见输入框;当眼睛闭上时,设置输入框面板为不可见,焦点在不可见输入框。

收工。

相关文章

网友评论

      本文标题:axure制作密码框(密码可见与隐藏)

      本文链接:https://www.haomeiwen.com/subject/srinnctx.html