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

AxureRP8.0教程 小楼一夜听春语 3846℃ 0评论

我们在做移动端登录注册模块的时候,普遍比较流行可以切换显示与隐藏密码框中所输入的内容。

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

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

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

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

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

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

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

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

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

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

第一个状态中:

第二个状态中:

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

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

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

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

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

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

以文本框“HidePassword”为例:

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

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

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

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

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

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

最终的交互设置如下图所示:

通过以上的步骤,我们就完成了密码输入框字符显示与隐藏切换这个交互效果。

感谢大家对Axure原创教程网的支持!

源文件下载:http://downloads.iaxure.com/input_toggle.zip

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

 

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 密码输入框字符显示与隐藏切换

喜欢 (17)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 老师真坏。 💡
    mrleon2017-06-26 16:57 回复
    • 小楼一夜听春语
      啥就真坏...
      小楼一夜听春语2017-06-26 17:23 回复
  2. OnSelectChange 这个只有3338版本下,只针对对SVG有
    Sunny2017-06-30 14:05 回复
  3. 这篇文章没有了老师以往的猥琐风格,我很难看懂了,差评!
    dony2017-08-03 20:03 回复