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

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

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

一、演示

https://7ebpff.axshare.com

二、交互原理講解

1. 輸入講解：

舉例說明：點擊q時，文本框獲取到按鈕q的值并顯示在文本框中。繼續(xù)點擊w，文本框獲取到W，顯示在文本框中原有的字符q后，顯示內(nèi)容變?yōu)閝w。

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

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

2. 元件對象講解

This：獲取當(dāng)前元件對象，當(dāng)前元件指添加事件的元件。

Target：獲取目標(biāo)元件對象，目標(biāo)元件指添加動作的元件。

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

3. 空格講解

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

4. 刪除講解

舉例說明：文本框中有”qwert”五個字母，點擊刪除，內(nèi)容變?yōu)椤皅wer”。刪除后，文本框只顯示前四個字母，顯示全部長度-1個字母。

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

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

三、交互操作講解

1. 輸入操作

a. 設(shè)計原型樣式

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

b. 設(shè)置交互

將三個鍵盤樣式轉(zhuǎn)換為動態(tài)面板三個狀態(tài)，分別取名為“大寫”、“小寫”、“數(shù)字”。

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

點擊大寫按鈕時，動態(tài)面板狀態(tài)切換為“大寫”。

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

c. 設(shè)置輸入交互

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

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

d. 將其他字母交互全部設(shè)置完

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

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

2. 空格操作

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

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

3. 刪除操作

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

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

這里函數(shù)比較復(fù)雜，舉個例子講解一下：

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

截取函數(shù)是截取文本的，所以第一步要獲取到目標(biāo)元件的文本，即target.text。

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

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

本文由@多知 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議