Axure RP官方教程翻译(11):自动点击区域

当一个输入框的值填写完毕后,自动跳到下一个区域。实现效果如下:

Axure RP官方教程翻译(11):自动点击区域

STEP 1:开始

  • 打开培训文档中的“Auto-tab 区域”。
  • 这个页面包含了三个文本区域排列成一个日期。这里有一个月份区域和一个天数区域,他们的数值都采用两位数,而年数区域则采用四位数。这些提示文本是使用提示文本功能。
  • 选择第一个组件“Month”。在属性标签栏下,定位到区域“最大长度”,在这个区域输入2。对“Day”组件进行同样的操作。而对“Year”组件则将最大长度设置成4。

Axure RP官方教程翻译(11):自动点击区域

STEP 2:自动从“Month”组件跳到“Day”组件

  • 选择“Month”组件,在属性标签栏下,双击“当文本改变”来制作一个文本改变实例。
  • 单击对话框顶部的“添加条件”按钮,打开条件编辑器。
  • 在最左边栏的下拉选项框中选择“组件值的长度”。保留接下来三个值为默认值。分别是“这个组件”,“等于”,和“值”。
  • 在最右边区域,填入数字2.
  • 点击却低估关闭条件编辑器。
  • 在实例编辑器的左边栏,点击行为“聚焦”。
  • 在右边栏,点击复选框“Day”。
  • 点击确定关闭对话框。

Axure RP官方教程翻译(11):自动点击区域

STEP 3:自动从“Day”组件跳到“Year”组件

重复上面的操作应用在“Day”组件上。确定使用“聚焦”行为时将目标改成“Year”组件。

Axure RP官方教程翻译(11):自动点击区域

STEP 4:预览

点击预览。

尝试点击submit按钮在没有在邮箱区域输入任何文本的情况下。当错误信息消失,尝试在邮箱地址输入文本然后再次点击submit按钮。

 

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code