【Axure教程】高保真原型图密码输入框

Hello，今天教大家做一个高保真的密码输入框，包括密码可视和保密效果、以及自动判断密码输入是否正确的效果。

一、材料准备

图标*2——1个是可视的图标，另外一个是不可视的图片，默认设置为隐藏。

输入框*2——1个位普通的text文本框（可见文本框），另外一个为密码文本框（不可见文本框），可以在文本框的属性里修改。两个文本框默认隐藏边框。然后将两个边框放置在同一个动态面板的2个state里面，分别为不可见和可见连个状态。

矩形*5——我们用矩形来制作文本框的边框，矩形的边框设置成5中颜色，分别为未交互是的灰色边框（普通外框），鼠标移入时的浅蓝色边框（鼠标移入时外框），获取焦点时的深蓝色边框（输入中外框），输入正确的绿色边框（输入正确时外框），输入错误时的红色边框（输入错误是外框）。除了普通边框，其他颜色的边框默认隐藏。

如下图所示摆放：