Axure教程 | 可自动伸缩高度的textarea输入框

本期给大家带来的教程是“可自动伸缩高度的textarea输入框”。

一、照例先上gif

二、制作方法

1. 首选还是分解元素

整体上我们可以看到需要用到的元素块为5个部分,分别是:

  1. 多文本输入框,主要用来输入文本内容的元素,清理边框和背景色后给它命名为“输入框”。
  2. 背景块,因为“多文本输入框”本身有很多限制,用一个“矩形”来专门背景色比较好,命名为“背景”。
  3. 输入框内字数展示,用来确定已经输入了多少个字,以及为了增加超出字数限制后,改变颜色的作用。设定选中后字体“变红”的样式后,命名为“输入字数”
  4. 斜杠,装饰用,没有具体作用,
  5. 限制字数,装饰用,没有具体作用。

备: “输入字数”、“斜杠”和“限制字数”,这三个打包成一个组,移动起来方便,命名为“字数限制”

2. 制作动效

交互动效设置在“多文本输入框”上,因为是在键盘输入的时候发生的变红,所以事件我们选用“文本改变时”

(1)首先数量

确定输入框一行可以输入多少汉字,然后确定限制字数,和可以伸缩的高度是多少。(我的设定输入框一行可以输入23个汉字,限制字数为255个汉字,可以伸缩的高度是4行。)设置判断

(2)设置判断

如图所示,为了满足我的设定,我需要用到6个判断。分别是:字数小于18,字数小于41,字数小于63,字数小于87,字数小于256 和 字数大于256。

为什么字数小于是18而不是23,原因是我设计的“字数限制”压在了输入框上,如果字数是23的话,就会出现文字重叠的情况了。

(3)写交互

每次判断生效后,都需要设置“输入框”和背景的尺寸,移动“字数限制”,改变“输入字数”。

所以这里就不重复介绍了,具体的交互设置如图:

本篇内容到此结束,不知道小伙伴们有没有更好的方式实现这个特效,在评论里留言吧!

本文原型链接:https://sj6jca.axshare.com

欢迎朋友们拍砖,多多指出其中的不足。

扩展阅读

Axure教程 | 仿做京东商城式的左侧菜单栏

Axure教程 | 制作一个商品飞入购物车的动效

Axure教程 | 如何使用中继器当数据库,制作web端幻灯片?

Axure教程 | web端的验证码(普通验证码和滑块验证码)如何制作?

Axure教程 | 小白入门,制作web端注册/登录

 

本文由 @jiantian 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。