axure切换焦点文本框样式

Posted 2020-09-14

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

先看效果：

制作步骤：

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

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

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

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

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

   

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

   

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

   

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

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

OK，大功告成~~

本文出自 “产品经理_狄睿鑫” 博客，请务必保留此出处http://pmdrx.blog.51cto.com/11810835/1920411