教程计数文本域实现

　　制定UI规范时，遇到实现＂限制字数的文本域＂的交互问题，即当用户输入的字数长度超过限制要求，如何只保留规定长度的文本？
　　效果如下：
　　我们知道【Number】类型的文本框，可以限制输入文本的最大长度，通常用在11位电话号码的情形较多，如下：
　　可惜，多行文本框并没有类型的区别，没有最大长度的限制。最后，只能联想到使用：
　　函数[[LVAR1.length]]：获得元件字符串的长度（即1234.length=4）；以及函数[[LVAR1.substring(from,to)]]：截取第from位到to位的字符串；
　　（即[[12345.substring(1,4)]]=234，也就是说截取第一位到第四位的数字但不包括第一位。）来实现上述的效果。
　　一、页面布局
　　为了使文本框的交互体验更好，本案例中，加入了一个矩形背景框，作为文本框的边框。主要是实现，鼠标点击文本框获得焦点时，边框线高亮的交互效果。因此，需要将文本框本身的边框线隐藏掉。
　　排版如下：
　　二、交互效果
　　（1）实现鼠标点击文本框时，边框线高亮效果
　　首先选中＂文本框＂：
　　1）添加获得焦点事件
　　属性 – 双击＂获得焦点时＂交互事件，元件 – 设置选中 – 勾选＂背景框＂，状态值为ture。
　　2）添加失去焦点事件
　　属性 – 双击＂失去焦点时＂交互事件，元件 – 设置选中 – 勾选＂背景框＂，状态值为false。
　　其次选中＂背景框＂：
　　设置选中样式：
　　属性 – 交互样式设置 – 选中，将边框线颜色设为主题色#0066ff；
　　（2）实现文本框的字数统计展示效果
　　主要用到函数：[[LVAR1.length]]
　　选中＂文本框＂：（此案例限制字数为 60）
　　1）添加＂文本改变时＂事件
　　属性- 双击＂文本改变时＂交互事件，元件 – 设置文本，勾选＂计数＂，文本值为[[LVAR1.length]]/60，其中[[LVAR1.length]]为文本框的字数。
　　（3）实现字数超过限制时，只保留规定长度内文本的交互效果
　　主要用到函数：[[LVAR1.substring(from,to)]]。
　　只需要在上面的＂文本改变时＂事件中，选择左侧的元件 – 设置文本，勾选＂文本域＂，文本值为[[LVAR1.substr(0,60)]]，其中，LVAR1为文本域的文本，即截取文本域前60个字符。
　　三、预览效果
　　学习更多教程，可关注本人公众号：艾斯的Axure峡谷。欢迎大家留言评论，也可以留下你期待看到的交互效果。
　　示例演示：