编者按:现在日常生活中手机随处可见，用手机进行文字交流需要键盘输入等操作；本文是作者分享的微信高保真原型图的键盘输入部分。我们一起来看看。

大家好，我发布微信原型图，做一系列文章。文章第一部分是微信登录-验证码登录系列。

验证码登录系列分为三篇，分别是获取验证码的60秒动态显示、键盘模拟输入、验证码验证。本文将为大家讲解模拟键盘输入。

一、示范

https://7ebpff.axshare.com

第二，解释交互原理

1.输入解释:

示例:当您单击q时，文本框获取按钮q的值并将其显示在文本框中。继续点击W，文本框会得到W，在文本框中显示原字符Q后，显示内容会变成qw。

综上所述，点击字母按钮，在文本框中获得对应的字母，新获得的字母在文本框中原始字符后一起显示。

简单表示:点击按钮，文本框文本=文本框原始文本+被点击按钮文本

2.组件对象的解释

这:获取当前组件对象，它是指事件被添加到的组件。

目标:获取目标组件对象，该对象是指添加了操作的组件。

点击按钮，文本框得到按钮字母并改变文本框的文字；单击的按钮是当前组件对象，即这个。单击按钮更改文本框的文本，文本框是目标组件，即目标。

3.空解释

操作原理和输入一样。简单表达:点击空，文本框文本=文本框原文+空。

4.删除解释

例:有& # 8221；qwert & # 8221五个字母，点击删除，内容变成“qwer & # 8221。删除后，文本框只显示前四个字母，显示全长-1个字母。

综上所述，删除时最好只显示第一个总长度-1个字母，使用intercept函数substr(start，length)。

Substr(start，length):从当前文本对象的指定起始位置截取一定长度的字符串。参数:start是裁剪的起始位置，从0开始计算，length是裁剪长度。此参数可以省略，这意味着从文本对象的开始位置到结束位置进行剪裁。

三、互动操作讲解

1.输入操作

A.设计原型风格

在页面添加文本框，取名为“输入文本框”；设计三个键盘，分别为大写键盘、小写键盘、数字键盘。

B.设置交互

将三种键盘样式转换成动态面板的三种状态，分别命名为“大写”、“小写”和“数字”。

当您点击“大写”和“小写”键盘左下角的“123”按钮时，动态面板状态切换为“数字”。

当点击大写按钮时，动态面板状态切换到“大写”。

点击小写和“ABC”按钮，动态面板状态将切换为“小写”。

�Ͳ���վ����Ͳ���վ���

C.设置输入交互

选择字母按钮，并在创建新的交互式单击时将文本框文本设置为文本框本身(目标文本)+按钮文本

在交互上添加一个新的动作，把焦点放到输入文本框上(这一步是在输入文本框中显示光标)。

设置所有其他字母交互

选择互动过程的第一个按钮，ctrl+c，选择下一个按钮，只需CTRL+v..

继续复制大写键盘的所有字母和数字键盘的数字，键盘输入设置完毕。

2.空操作

选择空框，将输入框中的文本设置为原文本+空框(轻按空框键一次)。

向交互中添加一个新动作，并将焦点放在输入文本框上。

3.删除操作

选择删除键并创建新的交互。点击时会将输入文本框文本的文本截取设置为从第一个文本开始，长度为整个length -1文本。

向交互中添加一个新动作，并将焦点放在输入文本框上。

这里的函数比较复杂，所以举个例子来说明:

假设文本框中有四个“1234”的文本。当您单击删除时，文本框中的文本变为“123”。在拦截功能上，每次删除，除了最后一条以外的所有文本都会被拦截。

截取函数截取文本，所以第一步是获取目标组件的文本，即target.text

Substr(start，length)需要从第一个文本开始截取函数，所以start为0，截取的文本总长度为-1个文本，所以length为目标组件text -1的长度，即为Target.text.length-1，所以截取函数表示为substr(0，Target.text.length-1)，组合时为[[target.text.length-1]。

结论:完成以上操作后，完成了验证码登录的键盘输入高保真原型图。