本期給大家?guī)淼慕坛淌恰翱勺詣由炜s高度的textarea輸入框”。

一、照例先上gif

二、制作方法

1. 首選還是分解元素

整體上我們可以看到需要用到的元素塊為5個部分，分別是：

1. 多文本輸入框，主要用來輸入文本內(nèi)容的元素，清理邊框和背景色后給它命名為“輸入框”。
2. 背景塊，因為“多文本輸入框”本身有很多限制，用一個“矩形”來專門背景色比較好，命名為“背景”。
3. 輸入框內(nèi)字數(shù)展示，用來確定已經(jīng)輸入了多少個字，以及為了增加超出字數(shù)限制后，改變顏色的作用。設定選中后字體“變紅”的樣式后，命名為“輸入字數(shù)”
4. 斜杠，裝飾用，沒有具體作用，
5. 限制字數(shù)，裝飾用，沒有具體作用。

備： “輸入字數(shù)”、“斜杠”和“限制字數(shù)”，這三個打包成一個組，移動起來方便，命名為“字數(shù)限制”

2. 制作動效

交互動效設置在“多文本輸入框”上，因為是在鍵盤輸入的時候發(fā)生的變紅，所以事件我們選用“文本改變時”

（1）首先數(shù)量

確定輸入框一行可以輸入多少漢字，然后確定限制字數(shù)，和可以伸縮的高度是多少。（我的設定輸入框一行可以輸入23個漢字，限制字數(shù)為255個漢字，可以伸縮的高度是4行。）設置判斷

（2）設置判斷

如圖所示，為了滿足我的設定，我需要用到6個判斷。分別是：字數(shù)小于18，字數(shù)小于41，字數(shù)小于63，字數(shù)小于87，字數(shù)小于256 和 字數(shù)大于256。

為什么字數(shù)小于是18而不是23，原因是我設計的“字數(shù)限制”壓在了輸入框上，如果字數(shù)是23的話，就會出現(xiàn)文字重疊的情況了。

（3）寫交互

每次判斷生效后，都需要設置“輸入框”和背景的尺寸，移動“字數(shù)限制”，改變“輸入字數(shù)”。

所以這里就不重復介紹了，具體的交互設置如圖：

本篇內(nèi)容到此結(jié)束，不知道小伙伴們有沒有更好的方式實現(xiàn)這個特效，在評論里留言吧！

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

歡迎朋友們拍磚，多多指出其中的不足。

擴展閱讀

Axure教程 | 仿做京東商城式的左側(cè)菜單欄

Axure教程 | 制作一個商品飛入購物車的動效

Axure教程 | 如何使用中繼器當數(shù)據(jù)庫，制作web端幻燈片？

Axure教程 | web端的驗證碼（普通驗證碼和滑塊驗證碼）如何制作？

Axure教程 | 小白入門，制作web端注冊/登錄

本文由 @jiantian 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。