全栈工程师?
嗯.....目前并不是!

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端註冊/登錄

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure教程 | 可自動伸縮高度的textarea輸入框》
文章链接:https://www.pmbear.com/axure%e6%95%99%e7%a8%8b-%e5%8f%af%e8%87%aa%e5%8b%95%e4%bc%b8%e7%b8%ae%e9%ab%98%e5%ba%a6%e7%9a%84textarea%e8%bc%b8%e5%85%a5%e6%a1%86/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们