Axure教程：计数文本域实现

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