axure文本框值相加_Axure教程：计数文本域实现

原标题：Axure教程：计数文本域实现

制定UI规范时，遇到实现“限制字数的文本域”的交互问题，即当用户输入的字数长度超过限制要求，如何只保留规定长度的文本？

效果如下：

我们知道【Number】类型的文本框，可以限制输入文本的最大长度，通常用在11位电话号码的情形较多，如下：

可惜，多行文本框并没有类型的区别，没有最大长度的限制。最后，只能联想到使用：

函数[[LVAR1.length]]：获得元件字符串的长度(即1234.length=4)；以及函数[[LVAR1.substring(from,to)]]：截取第from位到to位的字符串；

(即[[12345.substring(1,4)]]=234，也就是说截取第一位到第四位的数字但不包括第一位。)来实现上述的效果。

一、页面布局

为了使文本框的交互体验更好，本案例中，加入了一个矩形背景框，作为文本框的边框。主要是实现，鼠标点击文本框获得焦点时，边框线高亮的交互效果。因此，需要将文本框本身的边框线隐藏掉。

排版如下：

二、交互效果

(1)实现鼠标点击文本框时，边框线高亮效果