Axure原型技巧 | 這回我們模擬下鍵盤輸入
前兩天,因粉絲詢問關于鍵盤的輸入問題,如何能模擬像軟鍵盤一樣的輸入,可以添加刪除文字,這里模擬一個稍微簡單的鍵盤輸入效果,說它簡單是因為它不支持字符的插入操作,只模擬了全鍵盤和數字鍵盤,其它功能可以發揮你的大腦,補充完善,*_^
主要功能描述如下:
- 支持字母的添加
- 支持退格效果
- 可以進行大小寫切換
- 可以切換到數字鍵盤
- 單擊輸入框顯示鍵盤,輸入后點擊“搜索”隱藏鍵盤
現在開始。
1、拖一下單行輸入文本放到界面上
2、單行文本輸入框下面畫上軟鍵盤,使用真實的按鈕,26個英文字母加上一些其它功能按鈕。具體的按鈕的擺放,按鈕的交互樣式設置不再贅述,單擊下面的閱讀原文在線查看后下載源文件。
把軟鍵盤部分全部選中轉成動態面板,以便于控制顯示、隱藏、鍵盤切換。
3、給動態面板添新加個狀態,加上數字鍵盤
4、添加變量
添加三個變量,分別保存當前輸入的字符串、26個英文字母的大寫、26個英文字母的小寫,在切換大小寫字母時用到,里面的title和rpfile不用管,是用來顯示教程的標題和下載文件的名稱。
5、添加事件處理
1)字母按鈕事件說明
str=[[str]][[LVAR1]],這個用來拼接字符串,其中LVAR1為局部變量,給當前按下的按鈕上的文字,所有的字母事件一樣,其它字母復制這個事件即可,設置好變量值后,將變量值再重新賦值給輸入框。
2)退格事件說明
退格就是刪除當前字符串最后一位字母,使用到了字符串的截取函數substr
3)大小寫切換事件,即shift鍵的處理
單擊后,將26個按鈕上的英文字母在大寫和小寫之間進行來回切換,使用了之前定義的兩個變量,其實就是從兩個變量里截取對應位置的字符??梢钥吹脚袛鄺l件里加了判斷a字母里的字符是A時認為現在都是大寫狀態,否則是小寫狀態。大寫狀態時,從26個字母小寫變量截取字符,反之從大小變量串中截取字符。
4)數字鍵盤
數字鍵盤里的事件和字母鍵盤完全一樣,其它按鈕也加上對應事件
5)空格事件處理
單擊空格時,只需要在現有str變量后面拼上一個空格。
所有事件已處理完畢,可以F5鍵本地試一下效果了。
本文由 @Axure原型設計工場?原創發布于人人都是產品經理?,未經許可,禁止轉載。
求源文件shift鍵的設置看不懂呀?大神
求源文件
鏈接呢????
作者你好 只有演示 咋看源文件
作者你好~~為什么我看不到下載的鏈接地址啊
兩個問題,我琢磨了很久也沒解決,如果樓主能回答,感激不盡。
1、怎么在中間插入字符,例如輸入:Nae之后,怎么在e前面輸入m, 變成Name。
2、當輸入的字超過文本的顯示框時,怎么讓最開始輸入的文字隱藏,最后輸入的文字不被隱藏。
你好,我想問問
1)為什么需要這個str=[[str]][[LVAR1]] 而不是直接input=[LVAR1]
2) str=[[str]][[LVAR1]] 與str=[[LVAR1] 有什么區分啊
新手剛學,希望能指導一下
但是有一個問題哎~~ 比如我輸入一串英文 然后刪除 點擊空格 之前刪的就出來了。 刪了再打數字的話 之前的英文就在最前面了
呵呵,這么細心啊,像測試人員一樣 ?
我發現老師標題欄和下載源文件的按鈕的背景是藍色的,這個是怎么做出來的?我還以為是動態面板!求告知
動態面板的背景色
好厲害,學習了! ??
如果輸入框有光標閃爍就更好了
請問有啥用。。。
考慮一下看問題的角度,只是介紹axure作為一種工具,如何能更好地使用它。 ??