本文主要講的是多行文本框一鍵清空 、限制數(shù)量功能，一起來(lái)看看~

這次我們來(lái)講解一個(gè)在多行文本框 一鍵清空 / 限制數(shù)量功能。

一、準(zhǔn)備元件

1. 首先打開(kāi) Axure 新建文件，拖取一個(gè)矩形，設(shè)置長(zhǎng)度為： 375 px ，高度為： 80 px ；
2. 拖取一個(gè)多行文本框，設(shè)置長(zhǎng)度為： 335 px ，高度為： 60 px，右鍵設(shè)置隱藏邊框，設(shè)置提醒文字“輸入文本時(shí)顯示清除按鈕、數(shù)量倒計(jì)” ，命名為：“ 輸入框 ” （ 這里為隨意輸入 ） ；
3. 拖取一個(gè)文本，設(shè)置字體為： 12 px ，色值為 #999999 ，命名為：“ 限制數(shù)量展示 ” ；
4. 最后我們?cè)僮鲆粋€(gè)清空按鈕，大小 20 px 左右 ，命名為：“ 清空按鈕 ” ，然后點(diǎn)擊隱藏。

好的，完成之后我們會(huì)得到一下的樣子：

二、設(shè)置輸入框的交互樣式

（1）雙擊 “文本改變時(shí)” ，設(shè)置輸入框的 Case 1 的條件為：全部 – 元件文字 – This 等于（ “ == ” 是等于的意思）空值，設(shè)置隱藏清空按鈕。

（2）然后我們?cè)匐p擊 “文本改變時(shí)” ，設(shè)置?Case 2 的條件為：全部 – 元件文字 – This 不等于（ “ ！= ” 是不等于的意思 ）空值，設(shè)置顯示清空按鈕。

（3）第三步雙擊 “ 獲取焦點(diǎn)時(shí) ” ，設(shè)置 Case 1 的條件為：全部 – 元件文字 – This – 不等于空值，設(shè)置顯示清空按鈕。

（4）最后我們?cè)匐p擊 “ 失去焦點(diǎn)時(shí) ” ,設(shè)置隱藏清空按鈕（ 此處較簡(jiǎn)單無(wú)配圖 ）。

此時(shí)我們就把清空按鈕的功能完善了，現(xiàn)在我們可以來(lái)看一下（騰訊視頻鏈接）：https://v.qq.com/x/page/p1343kj95p6.html

清空輸入框的功能完成了，現(xiàn)在我們要來(lái)做字符數(shù)量限制，已經(jīng)完成的小伙伴接著往下看吧！

三、進(jìn)階

1. 選擇輸入框，繼續(xù)雙擊 “文本改變時(shí)” ，在?Case 3 設(shè)置文字于 This 為： “ [[This.text.substr（1,100）]] ” ；
2. 然后再設(shè)置 “ 限制數(shù)量展示 ” 的富文本為：“ [[100-This.text.length]]/100 ” ，設(shè)置為右對(duì)齊，不清楚的可以看看下圖。

然后我們的所有效果就都已經(jīng)實(shí)現(xiàn)了，各位完成的小伙伴預(yù)覽一下自己的成果吧！

騰訊視頻鏈接：https://v.qq.com/x/page/i1343yve2yx.html

以上就已制作完所有流程，需要源文件或者有相關(guān)問(wèn)題討論的，歡迎在下方留言。

end

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

題圖來(lái)自作者