Axure教程:限制輸入框輸入字數
小船今天要講的是【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進行測試
本文由 @小船?原創發布于人人都是產品經理。未經許可,禁止轉載。
這個原型可以分享一下嗎?
??
感覺在用畫圖復刻清明上河圖,用 Excel 做動畫。
對axure的摸索學習,就像ps做3d效果,個人追求
你這形容的是真形象
一般備注一下就好了,這個功能的還原,程序猿不會一個一個去試你到底是幾個字不顯示
弄的太復雜了。所有這樣搞一份原型設計出來要半年。不符合實際情況。
? 嗯啊 這屬于個人摸索,實際工作中,為了節約時間成本,一些交互細節是可以通過和開發們溝通很快實現的。畢竟有些交互用代碼實現比用Axure做demo更快的看到效果
輸入框不是有【最大長度】的屬性設置嗎?為什么還要用復雜的變量控制輸入框輸入字數呢?
因為希望做出的效果是 字數會隨著文字的增加或減少變動
那也不用這么復雜吧 ??
? 嗯啊 個人死磕啦。實際中直接溝通就好,溝通會更重要!
當研究工具練習唄,實際中,會以最快表達想發的方式為準