Axure疑难杂症：完美解决文本框读取、赋值、计数（玩转文本框）
亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！
课程主题：玩转文本框
主要内容：文本框读取、赋值、验证、计数
应用场景：验证码、文本限制、文本取值、文本赋值等场景
案例展示：
案例视频：
Axure疑难杂症：玩转文本框
正文内容：
文本框作为Axure重要的元件，同样是各类应用制作的基本要素，掌握和理解文本框内涵是实现产品逻辑和演示的重要表现手段。
文本框能发挥那些作用：
1、承载文本数据；承担着界面文本输入和展示的窗口；
2、页面文本变化的主要承担者；
3、产生信息的重要来源者；
4、验证数据的重要实施者；
文本框能做出哪些应用：
各种类型的输入框（例如账号输入框、密码输入框）、输出框（结果）、验证码、搜索框、计数框、动态框等；总结一句话：文本框兼具静态和动态两种属性，既可以作为输入者，也可以作为输入者、作验证者也是他的拿手好戏。
本节课玩转文本框目录如下：
- 文本框实现验证码并调起登录交互解决方案
- 文本框实现输入框字符实时监测与提醒解决方案
- 文本框实现输入结果比对验证解决方案
- 文本框实现读取并对其他文本框赋值解决方案
通过本节课的学习，相信大家在Axure产品设计上会产生非常大的进步，在产品交互表现上会非常出色，下面进入具体交互设计内容：
1、文本框实现验证码并调起登录交互解决方案
1.1建立基本框架，按下图分别创建验证码输入框、生成器、错误提示等信息；
图1
1.2制作验证码生成器
图2
图3
这里涉及到OnLoadVariable.substr(start,length)、OnLoadVariable.length、Math.random() 三个函数; OnLoadVariable.substr(start,length)表示：从当前文本对象中指定起始位置开始截取一定长度的字符串；OnLoadVariable.length表示当前对象的数目、Math.random()表示随机数；OnLoadVariable.length*Math.random()表示从个位置开始取数；
[[OnLoadVariable.substr(OnLoadVariable.length*Math.random(),1)]]
表达式的含义是：获得一个字符串文本，从某个随机数定义的位置开始取数，取length个数目的数据出来；最后的length为1，所以从某个随机数的位置取1个；
因为我们要生成四位的随机验证码，所以这套表达式要重复四个；
1.3验证码输入框交互
图4
这里我们用到失去焦点时，验证输入的内容是否和生成器一样，不一样显示错误提示，一样的话启用登录按钮。
图5
2、文本框实现输入框字符实时监测与提醒解决方案
通过登录页的注册按钮进入注册页，模拟要用户注册验证过程来演示对输入框的实时监控与提醒；
图6
注册页，搭建基本布局如下图
图7
图8
图9
图10
基本设计逻辑：当文本改变时，我们判断元件文字的长度是否等于6，因为我们设置的元件长度是6，（这个数字随意设置，如果设置成12，那么判定条件就是12）如果大于6那么就提示错误信息，同时获得焦点，引导用户再次输入。
图11
图12
密码、再次输入框同上，以上完成输入框字符实时监测与提醒解决方案。
3、文本框实现输入结果比对验证解决方案
再次输入要验证两个内容：一个是上边的字符长度已验证，另一个就是输入的结果要和正确密码进行比对。比对的基本逻辑是，当失去焦点时，再次输入框的内容是否和密码一致，如下
图13
图14
图15
再次输入内容与密码一致，启用注册按钮，不一致出现错误提示。以上完成结果验证这个流程。
4、文本框实现读取并对其他文本框赋值解决方案
接上文，用户已经输入了正确信息，点击注册后，我们需要弹出一个界面，用于记录用户已经注册的信息，方便用户进行复制或者其他操作，这时就需要我们对弹出的界面进行赋值，那么我们赋值的逻辑：已经注册的账号和密码数据同步到这个页面。
先制作弹窗的基本结构和一个登录按钮，当用户点关闭的时候，显示登录按钮，用户点登录就进入了主页面。
图16
图17
图18
图19
图20
最后调整一下布局，把动态面板盖住注册内容，登录按钮盖住注册按钮，因为这两个内容都是载入时隐藏，不影响。
本课小结：文本框是用途非常广泛，非常方便，但是我们要全面掌握它的特性，会使很多想法得以实现，否则只能做其他蠢事，搞得页面非常复杂而且臃肿，例如实现数据赋值，有的人直接贴图，这操作……真是无语啊，这不是一个优秀产品经理应该做的事，为了不断进步的你，加油吧！
近期正在制作https://blog.csdn.net/benleiqiang/category_12931191.htmlAxure疑难杂症专题，如果大家有待解决的问题或者难点，都可以私信我，我会放到专栏里供大家学习和分享。
相关课程直通车：
Axure随机验证码高级交互-CSDN博客
Axure疑难杂症：完美解决中继器筛选问题（时间条件筛选、任性筛选）-CSDN博客
如有其他相关问题，欢迎私信沟通，关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！