小船今天要講的是【Axure制作輸入框字數限制】。為了做出這個效果，小船瘋狂的學習…后來發現，嗯，其實真的挺簡單（但小船還是很有成就感了哈）。

嗯，對的，這篇是以Axure8.0為基礎的中文版。如果邏輯明白了，真的很簡單的，真的喲！

要求

1.字數要求為150字

2.超過150字后自動不能輸入后面的字符

第一步：對需要的控件進行命名

[輸入框]： ? ? ? text-box

[字數限制]： ? words-limit

第二步：對 text-box 添加 3個【文本改變時】的事件

事件1：將text-box的 [元件文字長度] 賦予給變量 OnLoadVariable 。

注意事項:

a.一定要選擇 [全局變量] 。配置動作中勾選OnLoadVariable。

b.一定要選擇[元件文字長度]。

事件2：當 text-box 的[元件文字長度]值>=0并且<=150時，使 [[150-OnLoadVariable]] 的值代替words-limit的值。

注意事項:

a.對case2進行編輯條件時，一定要選擇[元件文字長度]

b.對每個事件都要通過右鍵菜單將每個事件變為if xxx，而不是默認的else if xxx。

c.這里是[設置文本]，一定要選擇[值]，對[[150-OnLoadVariable]]的輸入一定要英文輸入法，并且中間沒有空格。

事件3：當 text-box 的[元件文字長度]值>150時，將[焦點元件文字]賦值給NewVariable，并利用函數[[NewVariable.substring(0,150)]]對變量NewVariable中前150個字符進行限制。

注意事項:

a.一定要選擇 [全局變量] 。配置動作中通過[添加全局變量]添加變量NewVariable。全局變量的值要選擇[焦點元件文字]。

b.對第二個設置，為[設置文本]。

c.設置文本的函數 要選擇 subatr(start,length)。并將（start，length）設置為（0，150）

第三步：F5進行測試

本文由 @小船?原創發布于人人都是產品經理。未經許可，禁止轉載。