Axure教程:限制輸入框輸入字數

13 評論 30295 瀏覽 55 收藏 4 分鐘

小船今天要講的是【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進行測試

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這個原型可以分享一下嗎?

    來自湖南 回復
  2. ??

    來自廣東 回復
  3. 感覺在用畫圖復刻清明上河圖,用 Excel 做動畫。

    來自廣西 回復
    1. 對axure的摸索學習,就像ps做3d效果,個人追求

      來自湖北 回復
    2. 你這形容的是真形象

      來自廣東 回復
  4. 一般備注一下就好了,這個功能的還原,程序猿不會一個一個去試你到底是幾個字不顯示

    來自浙江 回復
  5. 弄的太復雜了。所有這樣搞一份原型設計出來要半年。不符合實際情況。

    來自廣東 回復
    1. ? 嗯啊 這屬于個人摸索,實際工作中,為了節約時間成本,一些交互細節是可以通過和開發們溝通很快實現的。畢竟有些交互用代碼實現比用Axure做demo更快的看到效果

      來自湖北 回復
  6. 輸入框不是有【最大長度】的屬性設置嗎?為什么還要用復雜的變量控制輸入框輸入字數呢?

    來自廣東 回復
    1. 因為希望做出的效果是 字數會隨著文字的增加或減少變動

      來自湖北 回復
    2. 那也不用這么復雜吧 ??

      來自北京 回復
    3. ? 嗯啊 個人死磕啦。實際中直接溝通就好,溝通會更重要!

      來自湖北 回復
    4. 當研究工具練習唄,實際中,會以最快表達想發的方式為準

      來自廣東 回復