摘要：評論已經作為內容型產品的一個基礎功能，那麼評論功能中經常使用的字數限制，評論內容清除功能是如何通過原型實現呢？本文就實現這些功能交互的效果來為大家分享設計的思路與方法。
評論
準備元件，繪製線框圖
首先需要準備一個矩形框、多行文本框、文本標籤及矩形按鈕，併為這些元件命名。（養成命名的好習慣，將有助於交互動作的配置及元件的快速查找）隱藏多行文本框的邊框，默認隱藏矩形按鈕，矩形按鈕內輸入文字“清除”。假設我們限制評論內容為100字以內，則文本標籤中輸入100/100，前面的100為剩餘字數，後面的100為字數限制。
準備好元件，繪製線框圖
交互動作設置
為多行文本框設置文本改變事件，交互設置方法如下：
1）如果文本內容為空，則隱藏“一鍵清除”按鈕
2）如果文本內容不為空，則顯示“一鍵清除”按鈕
3）通過插入函數[[This.text.substr(0,100)]]來實現對文本字數限制的要求，即限制在0~100字之間；通過插入函數[[100-This.text.length]]/100實現對文本內容的限制功能，this.text.length用於監測文本的字數
交互設置如下圖所示：
文本改變事件
限制文本字數&監測文本字數
接著，需要監測文本框的焦點，我們為文本框設置獲取焦點和失去焦點事件
獲取焦點：如果文本框不為空，則顯示“一鍵清除”按鈕
失去焦點：如果文本框為空，則隱藏“一鍵清除”按鈕
交互設置如下圖所示：
獲取/失去焦點
最後，我們在為“一鍵清除”按鈕，設置鼠標單擊事件，點擊按鈕時，文本框內容為空，交互動作配置如下圖所示：
清除文本內容
至此一個帶有字數限制的評論功能原型已經完成，需要源文件的同學可以在評論區留言。如果覺得我的分享對你有幫助，不妨點個贊並關注，你的關注是我持續分享的動力。
閱讀更多 努力拼搏的80後 的文章
