Axure 微信高保真原型图——键盘输入

honghu2

Axure 微信高保真原型图——键盘输入

编纂导语：现在手机在咱们的平常糊口中到处可以用到，用手机举行文字沟通必要举行键盘输入等操作；本文是作者分享的关于微信高保真原型图的键盘输入部门，咱们一块儿来领会一下。

大师好，我将公布微信高保真原型图建造一系列文章，第一部门文章为微信登录——验证码登录系列。

验证码登录系列分为三篇文章，别离为获得验证码60秒动态展现、键盘摹拟输入、验证码验证。本文将为大师讲授摹拟键盘输入。
1、演示


2、交互道理讲授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为截取的长度，该参数可以省略，省略则暗示从肇端位置一向截取到文本工具末尾。
3、交互操作讲授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协定