Axure制作原型:输入框设置输入数字的限制

2019-09-2010:24:19原型设计Comments4,750 views字数 887阅读模式

作者:Andy文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型的时候,经常会使用到一个部件就是——文本框部件。文本框和多行文本框(也叫文本域),是我们制作需要用户填写的功能时使用的部件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

但是在Axure里面文本框的设置存在一些缺陷,让很多朋友在做原型的时候遇到一些困难。比如今天我们一起来看的这个小小的限制功能:如何文本框只能输入数字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

大家可能会想到的一个方法是,设置文本框的类型为数字(number)就可以了,当然,这是一种设置方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型:输入框设置输入数字的限制

这种设置方法简单,但是也存在一定的缺定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

1、在输入内容之前就已经完全禁止输入,所有看不到自己输入的内容是什么(数字除外)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

2、在文本框的右侧有按钮可以对数字进行增减。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型:输入框设置输入数字的限制

如果前面的设置方法做的并不是我们想要的效果的话,我们就必须另外想办法达到我们的要求。常规的办法不行,我们就要考虑用交互设置的方法来制作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

当然,输入的内容分为数字和非数字两种,所以我们需要设置用例条件。如果输入的内容是数字的话,就让文本框的内容等于我们输入的内容;如果输入的内容不是数字的话,就让文本框的内容等于0,也就是空值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

只是这样就够了吗?还没有。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

因为这里存在着二次输入的情况,也就是第一次输入数字,在接着输入的时候可能是数字一位的内容。像这样:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型:输入框设置输入数字的限制

所以我们的事件不能简单的设置在“文本改变时”,而是需要设置在“按键松开时”,在每一次按键松开时都做一次判断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

那么问题又来了,不是一次输入完成的内容,我们怎么判断呢?我们需要借助全局变量,把输入的内容用全局变量保存起来,然后再结合用例条件去设置。把全局变量的初始值设置为空,如果文本框输入的内容是数字的话,就让全局变量等于文本框的值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型:输入框设置输入数字的限制

这时,全局变量的值为“11”。如果我在11的后面再输入不是数字的内容。这时设置文本框的值等于全局变量的值,也就是刚才保存下来的“11”,所以就达到了不能输入数字以外的内容的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

Axure制作原型:输入框设置输入数字的限制

如果不输入了,把文本框内容清空掉了,就将全局变量的值设置为空值即可。这样在下次输入的时候又会开始新一轮的条件判断了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

这个方法也可以用在其他的输入内容的类型设置上,或者文字的判断上。掌握了方法之后我们就可以将它灵活应用,解决我们工作中的很多问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/16567.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/16567.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定