Axure教程-文本框文字改变时,字数统计效果制作

应用场景

输入框输入文字时,显示用户输入了多少文字,当输入文字数量超出限制数量的时候,向用户发出高亮的“超出最大字数限制”的反馈并禁用提交按钮,将按钮的背景色置灰。
原型设计工具:Axure RP8
注意:此案例中不适合使用 .length函数,如果有同学用.length函数实现了,请告知一下方法哟。
Axure教程-文本框文字改变时,字数统计效果制作

元件及交互设计如下

元件命名交互
矩形框充当背景而已
多行文本框Text Area1触发事件:文本改变时
Case1:
判断条件:如果当前元件文字长度≤120字时;
1、设置默认变量值(OnLoadVariable)=当前元件文字长度;
2、设置元件(tip_txtnumber)=[[OnLoadVariable]]/120,用富文本格式;(注:这里用富文本是因为我加入的字数统计超出时变色的交互,故这里采用富文本,注意把[[OnLoadVariable]]设置成黑色。);
3、隐藏文本标签(tipWarning);
4、启用按钮元件(btn_Click)。

Case2:
判断条件:当前元件文字长度>120字时;
1、设置默认变量值(OnLoadVariable)=当前元件文字长度;
2、设置元件(tip_txtnumber)=[[OnLoadVariable]]/120,用富文本格式,(注意在富文本编辑器里把[[OnLoadVariable]]设置成红色);
3、显示文本标签(tipWarning);
4、禁用按钮元件(btn_Click)。
按钮元件btn_Click交互样式配置:
禁用时,设置背景色为#999999
文本标tip_txtnumber
文本标签tipWarning

交互设置截图

Case1-This≤120
Case1-This≤120
Case2-This>120
Case2-This>120
Case2-富文本编辑
Case2-富文本编辑

RP下载地址:https://pan.baidu.com/s/1nr6j7jQearcTs7KKqDQnzw 密码:fs37

原创文章,作者:DevilStefanVIP会员,如若转载,请注明出处:https://www.pmtemple.com/fengsaitao/6395/

(2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
DevilStefan的头像DevilStefanVIP会员神一样的存在
上一篇 2019年1月17日 下午3:00
下一篇 2019年1月18日 上午12:00

相关推荐

发表回复

登录后才能评论

评论列表(1条)

微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部