在之前的文章中,我们介绍过在axure中自定义文本框样式的方法,今天我们再深入一些,当文本框的焦点发生变化时,动态切换焦点文本框的样式。

先看效果:

axure切换焦点文本框样式

制作步骤:

先把文本框的默认样式做出来:

  1. 拖入两个文本框,分别命名为用户名、密码,隐藏边框,设置好提示文字;、

  2. 拖入两个矩形,设置高度略大于文本框,边框颜色为浅灰色,分别命名为用户名边框、密码边框,分别把两个文本框置于对应的边框上方。

axure切换焦点文本框样式

axure切换焦点文本框样式

开始做交互,当文本框获取焦点时,改变边框颜色:

  1. 当文本框获取焦点时,把对应的边框矩形设置为选中状态,失去焦点时,取消对应的边框矩形的选中状态。用例如下:

    axure切换焦点文本框样式

  2. 设置两个边框矩形的“选中”样式:线段颜色为橙色;

    axure切换焦点文本框样式

  3. 当页面载入时,焦点应该自动设置在用户名文本框中,所以在页面载入时添加用例如下:

    axure切换焦点文本框样式

    需要说明的是,这个自动获取焦点动作在chrome浏览器中可能没有效果,使用IE内核的浏览器如(搜狗浏览器)是可以的;

  4. 其中“设置选中状态于 用户名边框="true"”这个动作必须要加上,否则没有效果。

OK,大功告成~~

axure切换焦点文本框样式

axure切换焦点文本框样式