Axure原型技巧 | 這回我們模擬下鍵盤輸入

15 評論 60405 瀏覽 250 收藏 5 分鐘

前兩天,因粉絲詢問關于鍵盤的輸入問題,如何能模擬像軟鍵盤一樣的輸入,可以添加刪除文字,這里模擬一個稍微簡單的鍵盤輸入效果,說它簡單是因為它不支持字符的插入操作,只模擬了全鍵盤和數字鍵盤,其它功能可以發揮你的大腦,補充完善,*_^

主要功能描述如下:

  1. 支持字母的添加
  2. 支持退格效果
  3. 可以進行大小寫切換
  4. 可以切換到數字鍵盤
  5. 單擊輸入框顯示鍵盤,輸入后點擊“搜索”隱藏鍵盤

現在開始。

1、拖一下單行輸入文本放到界面上

2、單行文本輸入框下面畫上軟鍵盤,使用真實的按鈕,26個英文字母加上一些其它功能按鈕。具體的按鈕的擺放,按鈕的交互樣式設置不再贅述,單擊下面的閱讀原文在線查看后下載源文件。

把軟鍵盤部分全部選中轉成動態面板,以便于控制顯示、隱藏、鍵盤切換。

26字母英文鍵盤

3、給動態面板添新加個狀態,加上數字鍵盤

數字鍵盤

4、添加變量

添加三個變量,分別保存當前輸入的字符串、26個英文字母的大寫、26個英文字母的小寫,在切換大小寫字母時用到,里面的title和rpfile不用管,是用來顯示教程的標題和下載文件的名稱。

添加兩個26字母變量

5、添加事件處理

1)字母按鈕事件說明

str=[[str]][[LVAR1]],這個用來拼接字符串,其中LVAR1為局部變量,給當前按下的按鈕上的文字,所有的字母事件一樣,其它字母復制這個事件即可,設置好變量值后,將變量值再重新賦值給輸入框。

字母事件說明

2)退格事件說明

退格就是刪除當前字符串最后一位字母,使用到了字符串的截取函數substr

退格事件說明

3)大小寫切換事件,即shift鍵的處理

單擊后,將26個按鈕上的英文字母在大寫和小寫之間進行來回切換,使用了之前定義的兩個變量,其實就是從兩個變量里截取對應位置的字符??梢钥吹脚袛鄺l件里加了判斷a字母里的字符是A時認為現在都是大寫狀態,否則是小寫狀態。大寫狀態時,從26個字母小寫變量截取字符,反之從大小變量串中截取字符。

大小寫切換事件

4)數字鍵盤

數字鍵盤里的事件和字母鍵盤完全一樣,其它按鈕也加上對應事件

5)空格事件處理

單擊空格時,只需要在現有str變量后面拼上一個空格。

所有事件已處理完畢,可以F5鍵本地試一下效果了。

點擊這里查看在線演示效果,內附源文件下載

 

本文由 @Axure原型設計工場?原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 求源文件shift鍵的設置看不懂呀?大神

    回復
  2. 求源文件

    回復
  3. 鏈接呢????

    來自北京 回復
  4. 作者你好 只有演示 咋看源文件

    來自遼寧 回復
  5. 作者你好~~為什么我看不到下載的鏈接地址啊

    來自福建 回復
  6. 兩個問題,我琢磨了很久也沒解決,如果樓主能回答,感激不盡。
    1、怎么在中間插入字符,例如輸入:Nae之后,怎么在e前面輸入m, 變成Name。
    2、當輸入的字超過文本的顯示框時,怎么讓最開始輸入的文字隱藏,最后輸入的文字不被隱藏。

    來自廣東 回復
  7. 你好,我想問問
    1)為什么需要這個str=[[str]][[LVAR1]] 而不是直接input=[LVAR1]
    2) str=[[str]][[LVAR1]] 與str=[[LVAR1] 有什么區分啊
    新手剛學,希望能指導一下

    來自廣東 回復
  8. 但是有一個問題哎~~ 比如我輸入一串英文 然后刪除 點擊空格 之前刪的就出來了。 刪了再打數字的話 之前的英文就在最前面了

    來自四川 回復
    1. 呵呵,這么細心啊,像測試人員一樣 ?

      來自安徽 回復
  9. 我發現老師標題欄和下載源文件的按鈕的背景是藍色的,這個是怎么做出來的?我還以為是動態面板!求告知

    來自廣東 回復
    1. 動態面板的背景色

      來自安徽 回復
  10. 好厲害,學習了! ??

    來自福建 回復
  11. 如果輸入框有光標閃爍就更好了

    來自湖北 回復
  12. 請問有啥用。。。

    來自北京 回復
    1. 考慮一下看問題的角度,只是介紹axure作為一種工具,如何能更好地使用它。 ??

      來自安徽 回復