编辑导语：如今手机在我们的日常生活中随处可以用到 ， 用手机进行文字沟通需要进行键盘输入等操作；本文是作者分享的关于微信高保真原型图的键盘输入部分 ， 我们一起来了解一下 。
大家好 ， 我将发布微信高保真原型图制作一系列文章 ， 第一部分文章为微信登录——验证码登录系列 。
验证码登录系列分为三篇文章 ， 分别为获取验证码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就行 。
推荐阅读
- 茶花花期管理：如何养护、怎么浇水、能施肥吗，茶花花期怎么养护？
- 橡皮树长得太高怎么办，橡皮树长得太高怎么办？
- 金钻浇水多了怎么办，金钻怎么浇水方法？
- 河北科技师范学院怎么样好不好 河北科技师范学院怎么样
- 海南医学院怎么样好不好 海南医学院怎么样
- 怎么下载电影到手机 怎么下载电影
- 宝贝英文怎么写baby 宝贝英文怎么写
- 南阳理工学院怎么样真实评价 南阳理工学院怎么样
- cad图纸怎么看才简单易懂 cad图纸怎么看
- 衡水学院怎么样真实回答 衡水学院怎么样