制定UI规范时,遇到实现“限制字数的文本域”的交互问题,即当用户输入的字数长度超过限制要求,如何只保留规定长度的文本?
![57d790687bfb977df9e36daf4ff01178.png](https://img-blog.csdnimg.cn/img_convert/57d790687bfb977df9e36daf4ff01178.png)
效果如下:
![390abc74654135304c3208a2b47c51e6.png](https://img-blog.csdnimg.cn/img_convert/390abc74654135304c3208a2b47c51e6.png)
我们知道【Number】类型的文本框,可以限制输入文本的最大长度,通常用在11位电话号码的情形较多,如下:
![aee69b6cf6d42ab22a547d4ce93128fa.png](https://img-blog.csdnimg.cn/img_convert/aee69b6cf6d42ab22a547d4ce93128fa.png)
可惜,多行文本框并没有类型的区别,没有最大长度的限制。最后,只能联想到使用:
函数[[LVAR1.length]]:获得元件字符串的长度(即1234.length=4);以及函数[[LVAR1.substring(from,to)]]:截取第from位到to位的字符串;
(即[[12345.substring(1,4)]]=234,也就是说截取第一位到第四位的数字但不包括第一位。)来实现上述的效果。
一、页面布局
为了使文本框的交互体验更好,本案例中,加入了一个矩形背景框,作为文本框的边框。主要是实现,鼠标点击文本框获得焦点时,边框线高亮的交互效果。因此,需要将文本框本身的边框线隐藏掉。
排版如下:
![b070f4bdb5cd691347d5e492502c2001.png](https://img-blog.csdnimg.cn/img_convert/b070f4bdb5cd691347d5e492502c2001.png)
二、交互效果
(1)实现鼠标点击文本框时,边框线高亮效果
首先选中“文本框”:
1)添加获得焦点事件
属性 – 双击“获得焦点时”交互事件,元件 – 设置选中 – 勾选“背景框”,状态值为ture。
![39906780a27475caf372e53f9a4cb97f.png](https://img-blog.csdnimg.cn/img_convert/39906780a27475caf372e53f9a4cb97f.png)
2)添加失去焦点事件
属性 – 双击“失去焦点时”交互事件,元件 – 设置选中 – 勾选“背景框”,状态值为false。
其次选中“背景框”:
设置选中样式:
属性 – 交互样式设置 – 选中,将边框线颜色设为主题色#0066ff;
![f579e907a736a5912acc4be97b0c5b64.png](https://img-blog.csdnimg.cn/img_convert/f579e907a736a5912acc4be97b0c5b64.png)
(2)实现文本框的字数统计展示效果
主要用到函数:[[LVAR1.length]]
选中“文本框”:(此案例限制字数为 60)
1)添加“文本改变时”事件
属性- 双击“文本改变时”交互事件,元件 – 设置文本,勾选“计数”,文本值为 [[LVAR1.length]]/60,其中[[LVAR1.length]]为文本框的字数。
![c45d5f916c1008fa7caf1d8197ed8154.png](https://img-blog.csdnimg.cn/img_convert/c45d5f916c1008fa7caf1d8197ed8154.png)
![8d168102c74e229b15b3105b71c697af.png](https://img-blog.csdnimg.cn/img_convert/8d168102c74e229b15b3105b71c697af.png)
(3)实现字数超过限制时,只保留规定长度内文本的交互效果
主要用到函数:[[LVAR1.substring(from,to)]]。
只需要在上面的“文本改变时”事件中,选择左侧的元件 – 设置文本,勾选“文本域”,文本值为[[LVAR1.substr(0,60)]],其中,LVAR1为文本域的文本,即截取文本域前60个字符。
![2a67bc2ee7b41a639681d3fca819b12f.png](https://img-blog.csdnimg.cn/img_convert/2a67bc2ee7b41a639681d3fca819b12f.png)
![7f41de488252850e6b972be3b65aab6b.png](https://img-blog.csdnimg.cn/img_convert/7f41de488252850e6b972be3b65aab6b.png)
三、预览效果
学习更多教程,可关注本人公众号:艾斯的Axure峡谷。欢迎大家留言评论,也可以留下你期待看到的交互效果。
示例演示:
![276509956f2cbd3f29fbc68c0c97db74.gif](https://img-blog.csdnimg.cn/img_convert/276509956f2cbd3f29fbc68c0c97db74.gif)
![68073ae65451128af6f3263732bbfa9e.gif](https://img-blog.csdnimg.cn/img_convert/68073ae65451128af6f3263732bbfa9e.gif)
作者:火星人~艾斯,公众号:艾斯的Axure峡谷
本文由 @火星人~艾斯 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议