Axure教程：计数文本域实现
source link: https://www.tuicool.com/articles/MrU7fmy
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
制定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峡谷。欢迎大家留言评论，也可以留下你期待看到的交互效果。
示例演示：
作者：火星人～艾斯，公众号：艾斯的Axure峡谷
本文由 @火星人～艾斯 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK