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

产品大法师 • 2019年1月17日下午4:50 • Axure教程 • 阅读 4655

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

元件及交互设计如下

元件	命名	交互
矩形框		充当背景而已
多行文本框	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