一、目標
通過axure的文本框和函數的功能，實現一個高保真的交互原型，做出文字輸入超出限制的效果。
二、技能要求
要求看本教程的同學，需要對函數有所了解的功能又一個基本的掌握。如果不熟悉的話，也可以通過本文來學習使用函數。函數也不是什么魔鬼，其實他們很乖。
三、目的
學以致用，希望天下沒有讓人迷茫的教程。
四、背景
最近時間比較充裕，我就把原型都做成交互高保真的了，遇到一些沒做過的我就搜教程看，但是很多教程都寫的很簡要，對學習的人要求比較高，不適合小白，我也常年因為類似的教程走過不少彎路，踩過不少坑。這次也是踩了坑，所以寫個小白教程，以資激勵自己輸出。
本落要改變世界！哼哼~
五、教程
步驟? 1
從元件庫拖一個文本域元件到畫布上，就是輸入段落那個元件（漢化后翻譯是文本域，比較專業，可能正常人回不太能理解。但是翻譯是死的，人是活的是不是）。然后單擊元件，在右側樣式下面給這個元件命名一下，我命名的叫“輸入框”，大家看心情吧，反正不協作的話怎么命名沒人管得著你。接下來，雙擊輸入框，輸入提示文字，文字樣式調整一下，顏色設置成999999。
步驟? 2
現在，拖一個矩形元件，放到輸入框的左下角。把矩形狂的邊框線寬度設置為0，背景也設置為空白就行。然后按照步驟1的方法給矩形命名，我管他叫計數，因為這個矩形起到了顯示輸入框最大輸入限制和統計當前輸入的字數的作用。
步驟? 3
接下來，雙擊輸入框，給輸入框添加事件。一共添加兩個事件。事件1是文本改變時框輸入時限制文本框的輸入為500字，并統計當前輸入的文字個數。事件2是獲取文本框焦點時，清空當前的提示文字。由于當前文本框沒有提示語的屬性，因此只能用這種方式做成輸入時清空提示語的交互。
然后按照圖示為當前的元件也就是文本框，添加一個局部變量。
添加完成后，點擊添加函數或變量，選擇剛才添加的局部變量，然后再選擇字符串函數length。
然后，選擇完函數后，在函數后面加上/500。下圖是設置完成后的樣子。這個函數設置的，就是下方右側圖示展示的內容。這個函數設置的含義是，獲取當前的元件，也就是輸入框文本的字符長度，也就是獲取你在輸入框里輸入了多少個字。然后/500是限制輸入長度是500字的意思。所以結合下來就是下方右側圖示的文字輸入字數限制提示的樣式。
現在能獲取你當前輸入的字數了，也顯示了當前可輸入的字數是500字。接下來，就要設置如何限制你的輸入不超過500字了。還說選擇輸入框，然后添加動作，選擇設置文本，然后元件，選擇輸入框。上一次選擇的是計數，這一次選擇輸入框。上一次是因為要設置顯示當前輸入字數和最大輸入字數，這一次設置是要限制你在文本框里輸入的字符數，所以要選擇文本框，千萬不要搞錯?。?！
跟之前一樣，設置函數，點擊fx去設置函數。然后與下方中間的圖所示一樣，先添加局部變量。然后選擇插入函數或變量，添加剛才添加的局部變量，上面有教怎么添加，不在贅述了。這次添加完局部變量后，再添加一個字符串函數：substring。見下方最右邊的圖。是substring不是substr，別搞錯了。我看的教程就用的substr，結果有bug，沒法輸入文字，會自動清空輸入框。。。后來我去找的函數，換成了substring就好了。教程誠是坑我，所以我才寫教程。。。廢話少說，添加完函數后。如圖，把函數里（）里的from和to改成你要截取的字符串的范圍。我改成了（0，500），意思是，不管文本框里輸入多少字，我只顯示從第一個到第500個字。從而達到限制輸入的效果。到此，字數限制的交互就結束了
然后剛才不是有個事件2嗎，事件2是一個獲取焦點時的事件。獲取焦點時，設置文本框的文本，這個文本設置上面都有教，大家復習一下。然后值呢，空著就行。原本咱們文本是寫了提示文案嗎，你再瀏覽器單擊時獲取了焦點，就會執行這個獲取焦點時的事件，然后把文本設置為空，就達到了咱們的交互目的。
本次教程到此結束！
這次寫教程花了1個小時呢~
可謂用心良苦。
你的第一步，顏色設置成999999是什么回事
我輸入的文字，再次聚焦豈不是又清空了??
這么復雜？Axure10中文本框有限制長度的設置
單行文本框有，多行的沒有。