PMBear本期給大家帶來的教程是“可自動伸縮高度的textarea輸入框”。
一、照例先上gif
二、製作方法
1. 首選還是分解元素
整體上我們可以看到需要用到的元素塊為5個部分，分別是：
- 多文本輸入框，主要用來輸入文本內容的元素，清理邊框和背景色后給它命名為“輸入框”。
- 背景塊，因為“多文本輸入框”本身有很多限制，用一個“矩形”來專門背景色比較好，命名為“背景”。
- 輸入框內字數展示，用來確定已經輸入了多少個字，以及為了增加超出字數限制后，改變顏色的作用。設定選中后字體“變紅”的樣式后，命名為“輸入字數”
- 斜杠，裝飾用，沒有具體作用，
- 限制字數，裝飾用，沒有具體作用。
備： “輸入字數”、“斜杠”和“限制字數”，這三個打包成一個組，移動起來方便，命名為“字數限制”
2. 製作動效
交互動效設置在“多文本輸入框”上，因為是在鍵盤輸入的時候發生的變紅，所以事件我們選用“文本改變時”
（1）首先數量
確定輸入框一行可以輸入多少漢字，然後確定限制字數，和可以伸縮的高度是多少。（我的設定輸入框一行可以輸入23個漢字，限制字數為255個漢字，可以伸縮的高度是4行。）設置判斷
（2）設置判斷
如圖所示，為了滿足我的設定，我需要用到6個判斷。分別是：字數小於18，字數小於41，字數小於63，字數小於87，字數小於256 和 字數大於256。
為什麼字數小於是18而不是23，原因是我設計的“字數限制”壓在了輸入框上，如果字數是23的話，就會出現文字重疊的情況了。
（3）寫交互
每次判斷生效后，都需要設置“輸入框”和背景的尺寸，移動“字數限制”，改變“輸入字數”。
所以這裡就不重複介紹了，具體的交互設置如圖：
本篇內容到此結束，不知道小夥伴們有沒有更好的方式實現這個特效，在評論里留言吧！
本文原型鏈接：https://sj6jca.axshare.com
歡迎朋友們拍磚，多多指出其中的不足。
擴展閱讀
Axure教程 | 如何使用中繼器當數據庫，製作web端幻燈片？
Axure教程 | web端的驗證碼（普通驗證碼和滑塊驗證碼）如何製作？
。
