51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！

入行产品已经有好些日子了，计算大年夜产品壹佰的小透明改变一下，将工作进修中的常识心得总结出来，既是一种分享，也是本身在兵荒马乱的工作中的梳理和记录。

今天想分享一下用Axure制造可以隐蔽暗码文本的输入框，制造效不雅如下图：

1.      起首须要一个输入框，然则Axure的文本框并不克不及实现对暗码的隐蔽。所以，我们须要一个动态面板，面板的状况1是一个实际暗码字符的文本框，面板2的状况是隐蔽暗码字符的暗码框。

2.      须要两张图片，表示显示/隐蔽暗码字符。这两张图片经由过程单击进行切换。

3.      实现动态面板与两张图片的交互。

思路有了，那么下面就开端做吧！

第一步：

须要一个矩形来放动态面板、图像按钮。添加响应元件如图：

第二步：

为动态面板添加状况：

状况1：隐蔽暗码字符

起首添加一个文本框，添加属性如下：

思路：

第三步：制造图片点击切换效不雅

状况2：显示暗码字符

再添加一个文本框元件，添加属性如下：

1.经由过程单击切换图片的选中状况；

2.图片选中状况改变时，切换为另一张图片：

第四步：添加交互

当图片按钮的选中状况改变时，切换犊飕面板状况：

别的，还须要将动态面板两个状况中的输入字符同步：

先为hide文本框添加：

同理，为show文本框添加：

同时我们须要撤消两个文本框的填充色彩，不然与矩形容器的色彩会不一样。

【编辑推荐】

1. 外媒速递：Web开辟者必读的十项设计趋势
2. 外媒速递：值得你加以懂得的五款Material Web设计框架
3. 外媒速递：Node.js应用构造设计中的七大年夜关键地点
4. 外媒速递：十种方法将色彩情感学融入你的Web设计
5. Node.js应用构造设计中的七大年夜关键地点_IT技巧周刊第509期

【义务编辑：张燕妮 TEL：（010）68476606】

到这里，我们就完成这个原型的制造啦！

在早期的时刻，暗码框的设计习惯默认为隐蔽暗码字符。然则信赖你们跟我一样都有同感：大年夜多半情况下没有人站在背后偷看你的暗码，隐蔽字符后反而为本身带来不便。所以，这里我默认是显示暗码字符，当有须要的时刻，点击图片按钮就可以切换到隐蔽字符按钮啦！

　　推荐阅读

　　代码质量实际上意味着什么？

51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！ 经常听人商量“代码质量”这个术语。当然，信赖你也曾如许做过。在一个软件市廛里逗留几天是很>>>详细阅读

本文标题：如何用Axure做一个清清爽爽的「密码输入框」？

地址：http://www.17bianji.com/lsqh/37313.html

 1/2    1