本期給大家帶來的教程是“可自動伸縮高度的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端的驗證碼(普通驗證碼和滑塊驗證碼)如何製作?
。