自动切换字段 | Auto Tab Fields

在本教程中,你将学习如何创建一组文本字段,在当前字段完成输入时,自动切换到下个字段。下面我们以生日为例。【原型预览】

1、元件设置
  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 拖拽3个文本框元件到画布中,分别命名为“日字段”、“月字段”、“年字段”。(你可以使用文本标签元件来标记他们。)
  3. 将文本框稍微缩小一些,然后按照如下的顺序排列:月字段、日字段、年字段。

注意:你可以根据你的时区格式随意排列字段,但是要记住在下面的步骤中来设置对应的光标切换顺序。

2、从月字段自动切换到日字段

将焦点放在日字段上

  1. 选中月字段,点击交互面板中的新建交互
  2. 在弹出的列表中选择文本改变时事件,然后选择获取焦点动作。
  3. 目标下拉列表中选择日字段,点击确定按钮保存操作。

只有在用户输入两个数字后才切换

  1. 将鼠标悬停在文本改变时的标题处,然后点击右侧的启用情形,在弹出的情形编辑对话框中,点击添加条件
  2. 在出现的条件行中,在第一个字段的下拉列表中选择元件文字长度,然后在最右侧的文本框中输入2。(在对话框底部的摘要部分会显示:如果 元件文字长度于 当前==”2”。这意味着当文本框中的文本达到2个字符长度时,就会触发该情形。)
  3. 点击确定按钮关闭情形编辑器。
3、从日字段自动切换到年字段

针对日字段重复步骤2下的操作,和月字段设置相同的文本改变时交互,但是目标字段的选项要改为年字段

4、预览交互
  1. 预览页面,点击月字段
  2. 输入你两位数的出生月份,1月就输入“01”,2月就输入“02”,以此类推。之后光标将会自动切换到日字段上。
  3. 在输入你两位数的出生日期,然后光标又会自动切换到年字段上。
评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注