編輯導語：如今手機在我們的日常生活中隨處可以用到，用手機進行文字溝通需要進行鍵盤輸入等操作；本文是作者分享的關于微信高保真原型圖的鍵盤輸入部分，我們一起來了解一下。

大家好，我將發布微信高保真原型圖制作一系列文章，第一部分文章為微信登錄——驗證碼登錄系列。

驗證碼登錄系列分為三篇文章，分別為獲取驗證碼60秒動態展示、鍵盤模擬輸入、驗證碼驗證。本文將為大家講解模擬鍵盤輸入。

一、演示

https://7ebpff.axshare.com

二、交互原理講解

1. 輸入講解：

舉例說明：點擊q時，文本框獲取到按鈕q的值并顯示在文本框中。繼續點擊w，文本框獲取到W，顯示在文本框中原有的字符q后，顯示內容變為qw。

總結得出，點擊字母按鈕時，文本框獲取到對應的字母，將剛獲取的放在文本框中原有的字符后一起顯示。

簡單表示：點擊按鈕，文本框文本=文本框原有文本+被點擊按鈕文本

2. 元件對象講解

This：獲取當前元件對象，當前元件指添加事件的元件。

Target：獲取目標元件對象，目標元件指添加動作的元件。

點擊按鈕，文本框獲取按鈕字母，并將文本框文本改變；被點擊的按鈕就是當前元件對象，也就是this，點擊按鈕需要改變文本框文本，文本框就是目標元件，也就是target。

3. 空格講解

操作原理同輸入，簡單表示：點擊空格，文本框文本=文本框原有文本+空格。

4. 刪除講解

舉例說明：文本框中有”qwert”五個字母，點擊刪除，內容變為“qwer”。刪除后，文本框只顯示前四個字母，顯示全部長度-1個字母。

總結來說，刪除時，只顯示前總長度-1個字母就好，用到截取函數substr(start,length)。

substr(start,length)：當前文本對象中從指定起始位置截取一定長度的字符串。參數：start為截取的起始位置，從0開始計算，length為截取的長度，該參數可以省略，省略則表示從起始位置一直截取到文本對象末尾。

三、交互操作講解

1. 輸入操作

a. 設計原型樣式

• 在頁面添加文本框，取名為“輸入文本框”；
• 設計三個鍵盤，分別為大寫鍵盤、小寫鍵盤、數字鍵盤。

b. 設置交互

將三個鍵盤樣式轉換為動態面板三個狀態，分別取名為“大寫”、“小寫”、“數字”。

點擊“大寫”、“小寫”鍵盤左下的“123”按鈕時，動態面板狀態切換為“數字”。

點擊大寫按鈕時，動態面板狀態切換為“大寫”。

點擊小寫和“ABC”按鈕時，動態面板狀態切換為“小寫”。

c. 設置輸入交互

選中字母按鈕，新建交互單擊時，設置文本框文本為文本框本身文本(Target.text)+按鈕文本(this.text)

在交互上添加新動作，獲取焦點到輸入文本框（這一步為了在輸入文本框中顯示光標）。

d. 將其他字母交互全部設置完

選中第一個按鈕的交互過程，ctrl+c，選中下一個按鈕，直接CTRL+v就行。

繼續將大寫鍵盤的字母和數字鍵盤的數字等全都復制完成，鍵盤的輸入就設置好了。

2. 空格操作

選中空格，設置輸入框文本為文本框原有文字+空格（敲一下空格鍵）。

在交互上添加新動作，獲取焦點到輸入文本框。

3. 刪除操作

選中刪除鍵，新建交互，單擊時，設置輸入文本框文本的文字截取從第一個文字開始，長度為全部長度-1個文本。

在交互上添加新動作，獲取焦點到輸入文本框。

這里函數比較復雜，舉個例子講解一下：

假設文本框中有“1234”四個文本，點擊刪除時，文本框中的文字變成了“123”，用截取函數來說就是每次刪除都是截取了文本除了最后一個文本的所有文本。

截取函數是截取文本的，所以第一步要獲取到目標元件的文本，即target.text。

substr(start,length)，需要截取從第一個文本的函數，所以start是0，截取文本全部長度-1個文本，所以length是目標元件文本的長度-1，就是Target.text.length-1，所以截取函數表達為substr(0,Target.text.length-1)，結合起來就是[[Target.text.substr(0,Target.text.length-1)]]。

結語：完成以上操作，驗證碼登錄的鍵盤輸入高保真原型圖就完成了。

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

題圖來自Unsplash，基于CC0協議